Menu
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case. Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
910
One of the ways of creating an overlay is by absolutely positioning an HTML element on the page. We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the z-index property.
Open your base image in Photoshop, and add your secondary images to another layer in the same project. Resize, drag, and drop your images into position. Choose a new name and location for the file. Click Export or Save.
Use z-index and top . This will layer the div on bottom, the image and then the span (overlay) on top. To set the positioning from the top edge, use top , which can be used with negative numbers if you need it to be higher on the Y axis than it's parent.
Use mutple backgorund on the element, and use a linear-gradient as your color overlay by declaring both start and end color-stops as the same value.
You can achieve this with this simple CSS/HTML:
.image-container { position: relative; width: 200px; height: 300px; } .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } HTML
<div class="image-container"> <img src="http://lorempixel.com/300/200" /> <div class="after">This is some content</div> </div> UPD: Here is one nice final demo with some extra stylings.
.image-container { position: relative; display: inline-block; } .image-container img {display: block;} .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } .image-container .after .content { position: absolute; bottom: 0; font-family: Arial; text-align: center; width: 100%; box-sizing: border-box; padding: 5px; } .image-container .after .zoom { color: #DDD; font-size: 48px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -19px; height: 50px; width: 45px; cursor: pointer; } .image-container .after .zoom:hover { color: #FFF; }<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="image-container"> <img src="http://lorempixel.com/300/180" /> <div class="after"> <span class="content">This is some content. It can be long and span several lines.</span> <span class="zoom"> <i class="fa fa-search"></i> </span> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
