1
var images = $("[data-img]");
images.mouseenter(function() {
$(this.dataset.img).css('box-shadow', "inset 0 0 20px black");
});
images.mouseout(function(){
$(this.dataset.img).css('box-shadow', "");
});
h3 {
margin-top: -21%;
margin-left: 17%;
font-weight: bold;
color: #000000;
font-size:1.5vw;
font-family: Chaparral Pro;
float: left;
}
.img1 {
background-image: url(t1.png) ;
width: 15%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2 {
background-image: url(t2.jpg) ;
width: 15%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3 {
background-image: url(t3.jpg) ;
width: 15%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box first">
<div >
<img class="img1" data-img=".img1" >
</div>
<a href="t1.html"><h3 class="h1" data-img=".img1"> Aliens </h3></a>
<div>
<p></p>
</div>
</div>
<div class="box second">
<div>
<img class="img2" data-img=".img2" >
</div>
<a href="a2.html"><h3 class="h2" data-img=".img2"> Day of the Dead </h3></a>
<p></p>
</div>
<div class="box third">
<div>
<img class="img3" data-img=".img3" >
</div>
<a href="a3.html"><h3 class="h3" data-img=".img3"> Evil dead </h3></a>
<p></p>
</div>
Everything is going well, but the images show a white border around it. I don’t know why she’s showing up because she’s nowhere declared to be and I don’t intend for her to show up.
Have you tried to check whether in different browsers the border remains? It seems to me that there is also a </Did> tag on the seventh line... Also try to force border:None on the images
– jefissu
opened in microsoft edge and the border no longer appears, so it is a Chrome problem?
– João Pedro
Why are you using the tag
<img>
if not to use an image? You can put a background in another element and get rid of the problem. Removing theimg
and putting the background indiv
you won’t have that problem.– Sergio
thx, problem solved.
– João Pedro