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?
