I display 6 images:
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.
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;
}
jQuery solution. In HTML I've moved class="highlight"
to parent div
:
<div class="row-project">
<div style="position:relative;" class="highlight">
<div class="hololens"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3>
</div>
<div style="position:relative" class="highlight">
<div class="cinetik"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3>
</div>
<div style="position:relative" class="highlight">
<div class="fly360"></div>
</div>
</div>
<div class="row-project">
<div style="position:relative" class="highlight">
<div class="train"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Train</h3>
</div>
<div style="position:relative" class="highlight">
<div class="avion"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Rafale</h3>
</div>
<div style="position:relative" class="highlight">
<div class="cinema"></div>
<h3 style="right:0px;left:0px; top:94px; margin:auto;">Cinema</h3>
</div>
</div>
javascript:
$('.highlight').hover(function() {
var $this = $(this);
$this.find('div').css({
opacity: '0.3', transition : "0.3s"
});
$this.find('h3').css({display : "block"});
}, function() {
var $this = $(this);
$this.find('div').css({
opacity: '1', transition : "0.3s"
});
$this.find('h3').css({display : "none"});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.