Image Hover Overlay usage:

Image Hover Overlay
Ping @ Your Nama Space

Web Site effects using CSS are a very good method at catching the visitors attention. Try it on your site, or contact us to do it for you. This is an example on how we use CSS scripting to create the Image hover overlay effect on our site. A easy to follow example can be found at W3Schools along with many more CSS References.

Click here to return to our main page.

The CSS Code

.container {
position: relative;
width: 161px;
}

.image {
display: block;
width: 161px;
height: auto;
}

.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #4E555D;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
left: 0;
}

.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}


The Html code

<body>
<h2>Slide in Overlay from the Right</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>

Have fun with it and make your website an extension of your services and brand.