How to make a simple overlay on a pure image using html, css. Overlays according to code gap are overlays that appear when a button is clicked or an area that the cursor passes through. Overlays are included in the design spices to beautify a website design.
This time I will review a little about overlays in a simple way, the code I use this time is still the same as the previous review. If you don’t have the code, try checking my previous review.
Read also: Adding Images to HTML with Effects from CSS Functions Easily
In this case, I want to give an overlay effect to the main image on the website. So later the end result is when the mouse cursor is in the area that I give the overlays effect function then the effect will display a new overlay but not completely cover the image.
First we need is the html code to display the image. here is the html code
That’s the code we need the first time, oh, I use the Sublime Tex editor software, it’s quite simple and light, friend. You can try the editor software if you haven’t installed it yet.
Read also: Best Editor Software Html, Css, Java, Javascript, Php Lightweight When Used
Second, of course we also need css to set the image display. Because there is a new function, there is a slight change in the css coding. Let’s check below
.image-overlay img {
width: 100%;
height: 250px;
border-radius: 10px;
}
It’s a little different, friend, I gave the class before img because the position of the img function is in the image-overlay class. My previous coding wrote a css function only img .
Thirdly we also need a new new code for the overlays effect. the following css code we need
.image-overlay {
position: relative;
overflow: hidden;
text-align: center;
width: 20%;
line-height: 120px;
height: 120px;
background: #103B51;
border-radius: 10px;
box-shadow: 0 5px 1px #f9f9f9;
cursor: pointer;
}
.image-overlay:hover .overlay{
opacity: 0.5;
}
.overlay{
position: absolute;
border-radius: 10px;
opacity: 0;
background: #f9f9f9;
@include transition(opacity .5s ease-in-out);
}
.box {
font-size: 20px;
font-weight: 200;
color: black;
padding: 0;
width: 1246px;
height: 225px;
text-align: center;
margin-left: 0px;
}
Finally, if you have succeeded in writing the entire code in a coherent way, hopefully the results can be seen immediately. the following is the result if we have succeeded
The display will be like the one above if we hover the mouse cursor over the drawing area. If we hover over the image area, the overlay will disappear. Here’s the picture
Thus my review of How to Create Overlays on Pure Images Using Simple HTML CSS. Hopefully it will be useful for friends. Greetings, Gapunyakode blogger from the village. Thank you
