Baptiste Arnaud Baptiste Arnaud - 5 months ago 15
HTML Question

Hover div, display text and opacity

I display 6 images:

enter image description here

HTML:

<div class="row-project">
<div style="position:relative;">
<div class="hololens highlight"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3>
</div>
<div style="position:relative">
<div class="cinetik highlight"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3>
</div>
<div style="position:relative">
<div class="fly360 highlight"></div>
</div>
</div>
<div class="row-project">
<div style="position:relative">
<div class="train highlight"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Train</h3>
</div>
<div style="position:relative">
<div class="avion highlight"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Rafale</h3>
</div>
<div style="position:relative">
<div class="cinema highlight"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Cinéma</h3>
</div>
</div>


CSS :

.row-project{
height: 250px;
width: 1200px;
position: relative;
display: flex;
@media screen and (max-width: 830px) {
width: 400px;
height: 750px;
flex-direction:column;
}
@media screen and (max-width: 350px) {
width: 250px;
height: 469px;
}
margin: auto;
div{
width: 100%;
height: 100%;
text-align: center;
display: flex;

}
h3{
margin: auto;
font-family: $theme-font-light;
font-size: 40px;
position: absolute;
cursor: default;
display: none;
}
}
.hololens{
background: url('../img/hololens.jpg') no-repeat center center;
border-radius: 15px;
@media screen and (max-width: 350px) {
background-size: 250px;
}

}
.cinetik{
background: url('../img/cinetik-homme.jpg') no-repeat center center;
border-radius: 15px;
@media screen and (max-width: 350px) {
background-size: 250px;
}
}
.fly360{
background: url('../img/360fly.jpg') no-repeat center center;
border-radius: 15px;
@media screen and (max-width: 350px) {
background-size: 250px;
}
}
.train{
background: url('../img/train.jpg') no-repeat center center;
border-radius: 15px;
@media screen and (max-width: 350px) {
background-size: 250px;
}
}
.avion{
background: url('../img/avion.jpg') no-repeat center center;
border-radius: 15px;
@media screen and (max-width: 350px) {
background-size: 250px;
}
}
.cinema{
background: url('../img/cinema.jpg') no-repeat center center;
border-radius: 15px;
@media screen and (max-width: 350px) {
background-size: 250px;
}
}


I'm trying here to implement a script that tells the image to have opacity to 0.3 and to display text on image.

Here is what i've got :

$('h3').hover(function(){
$(this).siblings("div").css({
opacity: '0.3', transition : "0.3s"
});
$(this).css({display : "block"});
});

$("h3").mouseleave(function(){
$(this).siblings("div").css({
opacity: '1', transition : "0.3s"
});
$(this).css({display : "block"});
});

$('.highlight').hover(function(){
$(this).css({
opacity: '0.3', transition : "0.3s"
});
$(this).siblings("h3").css({display : "block"});
});

$(".highlight").mouseleave(function(){
alert("ok");
$(this).css({
opacity: '1', transition : "0.3s"
});
$(this).siblings("h3").css({display : "none"});
});


It almost works but the only bug is that when i leave my mouse of an image and directly go onto another h3 tag, it keeps the previous h3 hovered tag displayed. Otherwise, everything works perfectly.
A solution would be to have a "highlight" class specific to each divs but it makes my jQuery script too long

Do you have any idea how to fix this ? Or do you have any suggestions how to do it cleaner ?

Thanks.

Answer

You don't need javascript for that. Instead, use the :hover pseudo-selector from CSS.

See this JSFiddle for a simple example : https://jsfiddle.net/10aq644s/

HTML :

<div>
  <div class="container">
    <img src="http://placehold.it/300x300">
    <h3>Hello World !</h3>
  </div>
  <div class="container">
    <img src="http://placehold.it/300x300">
    <h3>Hello World !</h3>
  </div>
</div>

CSS:

.container {
  position: relative;
  width: 300px;
}

.container
  > img {
    border: solid 1px red;
  }
.container
  > h3 {
    display: block;
    visibility: hidden;
    top: 0;
    position: absolute;
    width: 300px;
    text-align: center;
  }
.container:hover
  > h3 {
    visibility: visible;
  }
Comments