Image hover effects - how to change background on mouse over

Updated: 4 December, 2018 seen 9,424

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? 

about

Hi! My name is Reinis Fischer (38), a proud dad and devoted husband. CEO and Founder of Terramatris crypto hedge fund, drone enthusiast, world traveler, photographer, and passionate lover of Georgian cuisine (vegetarian).

An ex-pat living in Georgia since 2011, I trade stocks, take photographs, work out at the gym, and many more. Here I write about travel, finance, and other things that might interest me.