Image hover effects - how to change background on mouse over

| Drupal Development | 14 seen

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">
<span class="image-overlay ">Read Full Article</span>

And here is CSS:

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

#image-hover:hover img {

.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 {
text-shadow: 0px 0px 1px black;

Easy, right?