CSS Styling Images (Image Hover Overlay)
We will use CSS styles for showing a overlay over images, when the mouse comes over it. It shows the overlay when mouse comes over it, and gets hidden when mouse gets moved away from it.
Image Hover Overlay
This example use CSS Styles to show a overlay over image.
Fade in Text
On mouse hover, The opacity changes from 0 to 1 with a transition of .5s of the <div> element with class "ex1_overlay".
<style>
.ex1_container {
position: relative;
width: 400px;
max-width: 100%;
}
.ex1_container .image {
display: block;
width: 100%;
height: auto;
}
.ex1_overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(255,0,0,0.3);
}
.ex1_container:hover .ex1_overlay {
opacity: 1;
}
.ex1_text {
color: white;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="ex1_container">
<img src="live_to_love.jpg" alt="Live to Love" class="image">
<div class="ex1_overlay">
<div class="ex1_text">Live to Love</div>
</div>
</div>
Fade in a Box
On mouse hover, The opacity changes from 0 to 1 with a transition of .5s of the <div> element with class "ex2_middle".
<style>
.ex2_container {
position: relative;
width: 400px;
max-width: 100%;
}
.ex2_container .image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
}
.ex2_middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.ex2_container:hover .image {
opacity: 0.3;
}
.ex2_container:hover .ex2_middle {
opacity: 1;
}
.ex2_text {
background-color: #ff0000;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="ex2_container">
<img src="live_to_love.jpg" alt="Live for Love" class="image" style="width:100%">
<div class="ex2_middle">
<div class="ex2_text">Live for Love</div>
</div>
</div>
Slide in from top
On mouse hover, The height changes from 0 to 100% with a transition of .5s of the <div> element with class "ex3_overlay". Its position also changes to bottom : 0;, to make it visible.
<style>
.ex3_container {
position: relative;
width: 400px;
max-width: 100%;
}
.ex3_container .image {
display: block;
width: 100%;
height: auto;
}
.ex3_overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(255,0,0,0.3);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.ex3_container:hover .ex3_overlay {
bottom: 0;
height: 100%;
}
.ex3_text {
color: white;
font-size: 20px;
font-weight: bold;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="ex3_container">
<img src="live_to_love.jpg" alt="Live to Love" class="image"/>
<div class="ex3_overlay">
<div class="ex3_text">Live to Love</div>
</div>
</div>
Slide in from bottom
On mouse hover, The height changes from 0 to 100% with a transition of .5s of the <div> element with class "ex4_overlay".
<style>
.ex4_container {
position: relative;
width: 400px;
max-width: 100%;
}
.ex4_container .image {
display: block;
width: 100%;
height: auto;
}
.ex4_overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0,0.3);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.ex4_container:hover .ex4_overlay {
height: 100%;
}
.ex4_text {
color: white;
font-size: 20px;
font-weight: bold;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="ex4_container">
<img src="live_to_love.jpg" alt="Live to Love" class="image">
<div class="ex4_overlay">
<div class="ex4_text">Live to Love</div>
</div>
</div>
Slide in from Left
On mouse hover, The width changes from 0 to 100% with a transition of .5s of the <div> element with class "ex5_overlay".
<style>
.ex5_container {
position: relative;
width: 400px;
max-width: 100%;
}
.ex5_container .image {
display: block;
width: 100%;
height: auto;
}
.ex5_overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0,0.3);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.ex5_container:hover .ex5_overlay {
width: 100%;
}
.ex5_text {
white-space: nowrap; /* This prevents texts from wrapping to next line, when changing width*/
color: white;
font-size: 20px;
font-weight: bold;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="ex5_container">
<img src="live_to_love.jpg" alt="Live to Love" class="image"/>
<div class="ex5_overlay">
<div class="ex5_text">Live to Love</div>
</div>
</div>
Slide in from Right
On mouse hover, The width changes from 0 to 100% with a transition of .5s of the <div> element with class "ex6_overlay". Its position also changes to left:0;, to make the overlay visible.
<style>
.ex6_container {
position: relative;
width: 400px;
max-width: 100%;
}
.ex6_container .image {
display: block;
width: 100%;
height: auto;
}
.ex6_overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(255,0,0,0.3);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.ex6_container:hover .ex6_overlay {
width: 100%;
left: 0;
}
.ex6_text {
white-space: nowrap;
color: white;
font-size: 20px;
font-weight: bold;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="ex6_container">
<img src="live_to_love.jpg" alt="Live to Love" class="image"/>
<div class="ex6_overlay">
<div class="ex6_text">Live to Love</div>
</div>
</div>
Comments
Post a Comment