Image hover effects - how to change background on mouse over

| Drupal Development | 34 seen

CSS

Today I faced again some interesting thing to create - on hover image to change the background and display text over it

Here is how it looks:

On the left side, you can see the default image, while on the right side with mouse over. To achieve such behavior in Drupal is pretty simple, a little bit CSS and you are done.

Here is my view with div tags and Drupal fields:

<div class="image-hover">
[field_images]
<span class="image-overlay ">Read Full Article</span>
</div>

And here is CSS:

.image-hover {
display: inline-block;
position: relative;
background: #000;
line-height: 0px;
}

#image-hover:hover img {
opacity:0.3;
filter:alpha(opacity=30);

}
.image-hover span.image-overlay {
display: table-cell;
position: absolute;
z-index: 3;
background: transparent;
width: 100%;
top: 50%;
left: 0px;
color: transparent;
text-align: center;
vertical-align: center;
margin-top: -23px;
line-height: 20px;
}
.image-hover:hover span.image-overlay {
color:#fff;
text-shadow: 0px 0px 1px black;
}

Easy, right?