Fade text out on hover
Clash Royale CLAN TAG#URR8PPP
Fade text out on hover
I am working with Bootstrap 3, and have made the below fade in paragraf text when a person is hovering over the picture.
paragraf
It is not gonna look good if the head and subline is there, therefore I would like the head and sub-headline is fading out, when a person hover the image, so it is only the paragraf text there is shown.
paragraf
I am not quite sure how to do that, or how to get started on it. Can somebody give me some advice on this?
A live demo can be seen here.
body
background-color: #f5f5f5;
.mk.row [class*="col-"]
padding-right: 5px;
padding-left: 5px;
.mk.row
margin-left: -5px;
margin-right: -5px;
background-color: #fff
.img-responsive
height: 100%;
/* Position of buttons/text in a single grid element */
.inner-wrapper
background: none;
.bottom-left
position: absolute;
bottom: 2%;
left: 6%;
.light-font
color: #fff;
text-transform: uppercase;
/* Hover for grid elements that contains text */
.hovereffect
display:inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
.hovereffect .overlay
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
.hovereffect:hover .overlay
background-color: rgba(170,170,170,0.4);
.hovereffect h2, .hovereffect img
transition: all 0.4s ease-in-out;
.hovereffect img
display: block;
position: relative;
transform: scale(1.1);
.hovereffect:hover img
transform: scale(1);
.hovereffect h2
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
.hovereffect p.info
text-decoration: none;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 90%;
width: 90%;
top:5%; /* (100% - 85%)/2 */
left:5%;
position: absolute;
text-align: left;
padding: 20px 20px 20px 20px;
.hovereffect:hover p.info
opacity: 1;
transform: scale(1);
background-color: rgba(0,0,0,0.4);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="mk row">
<div class="col-sm-6">
<a href="#">
<div class="hovereffect">
<img src="https://drwyjmricaxm7.cloudfront.net/repository/TigerTrailItinerary1RegionalToursIndia-58141245765254_crop_610_410.jpg" alt="Accesories" class="img-responsive"></img>
<div class="overlay">
<a href="#">
<p class="info">
Lorem ipsum dolor sit amet, consectetuer vel interdum tempus egestas sed, eros ea ullamcorper tellus ut vestibulum ante. Id posuere sem est arcu, dapibus est. Neque ornare magna nunc volutpat blandit lorem, lacus sagittis ligula volutpat ac nullam<br/><br/> Vulputate luctus ipsum velit eget amet aliquam. Ac nibh dictum fermentum sodales, tincidunt metus placerat erat. In donec vitae luctus lorem repudiandae fames, explicabo donec in a non molestie. Montes ac quis eget morbi, vel
</p>
</a>
</div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">This headline need to fade out</h3>
<span class="light-font">This subheadline should fade out when hover</span>
<!--<button class="btn btn-success btn-lg">Læs mere</button>-->
</div>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
2 Answers
2
It's pretty easy
I have made slight changes to the css part
css
Just as you added the .hovereffect:hover .overlay for<div class='overlay' ../> rule
Add .inner-wrapper.bottom-left h3 selector with :hover
.hovereffect:hover .overlay
<div class='overlay' ../>
.inner-wrapper.bottom-left h3
:hover
body
background-color: #f5f5f5;
.mk.row [class*="col-"]
padding-right: 5px;
padding-left: 5px;
.mk.row
margin-left: -5px;
margin-right: -5px;
background-color: #fff
.img-responsive
height: 100%;
/* Position of buttons/text in a single grid element */
.inner-wrapper
background: none;
.bottom-left
position: absolute;
bottom: 2%;
left: 6%;
.light-font
color: #fff;
text-transform: uppercase;
/* Hover for grid elements that contains text */
.hovereffect
display:inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
.hovereffect .overlay
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
.hovereffect:hover .overlay
background-color: rgba(170,170,170,0.4);
.hovereffect h2, .hovereffect img
transition: all 0.4s ease-in-out;
.hovereffect img
display: block;
position: relative;
transform: scale(1.1);
.hovereffect:hover img
transform: scale(1);
.hovereffect h2
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
.hovereffect p.info
text-decoration: none;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 90%;
width: 90%;
top:5%; /* (100% - 85%)/2 */
left:5%;
position: absolute;
text-align: left;
padding: 20px 20px 20px 20px;
.hovereffect:hover p.info
opacity: 1;
transform: scale(1);
background-color: rgba(0,0,0,0.4);
.hovereffect:hover .inner-wrapper.bottom-left h3,.hovereffect:hover .inner-wrapper.bottom-left span
transition: all 0.4s ease-in-out;
.hovereffect:hover .inner-wrapper.bottom-left h3,.hovereffect:hover .inner-wrapper.bottom-left span
opacity:0;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="mk row">
<div class="col-sm-6">
<a href="#">
<div class="hovereffect">
<img src="https://drwyjmricaxm7.cloudfront.net/repository/TigerTrailItinerary1RegionalToursIndia-58141245765254_crop_610_410.jpg" alt="Accesories" class="img-responsive"></img>
<div class="overlay">
<a href="#">
<p class="info">
Lorem ipsum dolor sit amet, consectetuer vel interdum tempus egestas sed, eros ea ullamcorper tellus ut vestibulum ante. Id posuere sem est arcu, dapibus est. Neque ornare magna nunc volutpat blandit lorem, lacus sagittis ligula volutpat ac nullam<br/><br/> Vulputate luctus ipsum velit eget amet aliquam. Ac nibh dictum fermentum sodales, tincidunt metus placerat erat. In donec vitae luctus lorem repudiandae fames, explicabo donec in a non molestie. Montes ac quis eget morbi, vel
</p>
</a>
</div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">This headline need to fade out</h3>
<span class="light-font">This subheadline should fade out when hover</span>
<!--<button class="btn btn-success btn-lg">Læs mere</button>-->
</div>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Thank you for the answer. That is working is I wanted :-) Is it possible to control how long time the fade of the text is, when you remove the mouse from the image?
– Mv27
Aug 12 at 18:09
You can control it by updating
transition: all 0.4s ease-in-out; where 0.4 is the amount of time our transition work(suppose you need 800ms to complete the transition you can place 0.8 or 800ms in the rule )– Anandhu
Aug 12 at 18:11
transition: all 0.4s ease-in-out;
But then it will also affect the fade in. It was more if it was possible to separate the fade. Fx fade-in: 0.4s and fade-out: 0.9s.
– Mv27
Aug 12 at 18:14
You can check the documentation for transition css property [here] <developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/…;
– Anandhu
Aug 12 at 18:14
Set the transition: all 0.4s ease-in-out; to the class h3 and subheading and set the opacity:0 onhover, by doing this, you will get the same effect when you remove the mouse from the image. please check the below working snippet, hope it helps :)
transition: all 0.4s ease-in-out;
h3 and subheading
opacity:0
body
background-color: #f5f5f5;
.mk.row [class*="col-"]
padding-right: 5px;
padding-left: 5px;
.mk.row
margin-left: -5px;
margin-right: -5px;
background-color: #fff
.img-responsive
height: 100%;
/* Position of buttons/text in a single grid element */
.inner-wrapper
background: none;
.bottom-left
position: absolute;
bottom: 2%;
left: 6%;
.light-font
color: #fff;
text-transform: uppercase;
/* Hover for grid elements that contains text */
.hovereffect
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
.hovereffect .overlay
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
.hovereffect:hover .overlay
background-color: rgba(170, 170, 170, 0.4);
.hovereffect h2,
.hovereffect img
transition: all 0.4s ease-in-out;
.hovereffect img
display: block;
position: relative;
transform: scale(1.1);
.hovereffect:hover img
transform: scale(1);
.hovereffect h2
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
.hovereffect p.info
text-decoration: none;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 90%;
width: 90%;
top: 5%;
/* (100% - 85%)/2 */
left: 5%;
position: absolute;
text-align: left;
padding: 20px 20px 20px 20px;
.hovereffect:hover p.info
opacity: 1;
transform: scale(1);
background-color: rgba(0, 0, 0, 0.4);
.inner-wrapper.bottom-left h3,
.inner-wrapper.bottom-left span
transition: all 0.4s ease-in-out;
.hovereffect:hover .inner-wrapper.bottom-left h3,
.hovereffect:hover .inner-wrapper.bottom-left span
opacity: 0;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="mk row">
<div class="col-sm-6">
<a href="#">
<div class="hovereffect">
<img src="https://drwyjmricaxm7.cloudfront.net/repository/TigerTrailItinerary1RegionalToursIndia-58141245765254_crop_610_410.jpg" alt="Accesories" class="img-responsive" />
<div class="overlay">
<a href="#">
<p class="info">
Lorem ipsum dolor sit amet, consectetuer vel interdum tempus egestas sed, eros ea ullamcorper tellus ut vestibulum ante.
Id posuere sem est arcu, dapibus est. Neque ornare magna nunc volutpat blandit lorem, lacus sagittis ligula
volutpat ac nullam
<br/>
<br/> Vulputate luctus ipsum velit eget amet aliquam. Ac nibh dictum fermentum sodales, tincidunt metus placerat
erat. In donec vitae luctus lorem repudiandae fames, explicabo donec in a non molestie. Montes ac quis eget
morbi, vel
</p>
</a>
</div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">This headline need to fade out</h3>
<span class="light-font">This subheadline should fade out when hover</span>
</div>
</div>
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
i'll update the answer
– Anandhu
Aug 12 at 18:06