Wie man Hover-Effekt auf das Bild in HTML verwenden?

-5

I 2 angebracht Bilder unter 1 ist einfach und ist mit Hover .I wie das zweite Bild auf schweben orange Grenze müssen .Any 1 weiß, wie diese Art von HoverWie man Hover-Effekt auf das Bild in HTML verwenden?

unter

Ny Code von CSS zu geben:

<div class="col-md-4 image-hover img-opacity"> 
    <img class="img-1" src="assets/images/img-1.png"> 
    <p>Lorem ipsum dummy text</p> 
</div>

Quelle

2017-04-05 user3784723

Google ist dein Freund! – Pedram

Bitte nehmen Sie die [Tour] (http://stackoverflow.com/tour), schauen Sie sich um und lesen Sie die [Hilfe] (http://stackoverflow.com/help), insbesondere [Wie mache ich Stellen Sie eine gute Frage?] (http://stackoverflow.com/help/how-to-ask) Versuchen Sie, das Problem zu lösen. Wenn Sie auf ein bestimmtes Problem stoßen, stellen Sie eine Frage mit Ihrem Versuch (einschließlich des relevanten Codes), sagen Sie, was nicht funktioniert, und erklären Sie Ihre bisherigen Untersuchungen. –

@pedram Ist es möglich, diesen Bildtyp mit css oder jquery zu schweben? – user3784723

bereits.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
    position: relative; 
    width: 50%; 
} 

.image { 
    content:url("assets/images/img-1.png"); 
    opacity: 0.8; 
    display: block; 
    width: 100%; 
    height: auto; 
    transition: .5s ease; 
    backface-visibility: hidden; 
} 

.container:hover .image { 
    content:url("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"); 
    opacity:2; 
} 

</style> 
</head> 
<body> 

<div class="container"> 
    <img class="image"> 
    <p>Lorem ipsum dummy text</p> 
</div> 

</body> 
</html>

Quelle

2017-04-05 08:21:08

Vielen Dank seine Arbeit, aber kann ich auch addieren Sie Hintergrundfarbe mit Opazität? – user3784723

Yes..Plz markieren Sie diese Lösung als angenommen. –

Ok ich will, aber Sie bitte lassen Sie mich auch wissen, wie man Hintergrundfarbe darin hinzufügt – user3784723

Hier arbeitet Beispiel beachten .hover Zecken mit console.log aber mouseover-Ereignis wird nur einmal ausgelöst, wenn Sie den Mauszeiger über das Bild bewegen.

// Jquery 
 
$('.img-1').hover(function() { 
 
    // do stuff 
 
    console.log($(this).attr('src')); 
 
}); 
 

 
// pure javascript 
 

 
var img = document.querySelector('.img-1'); 
 

 
img.addEventListener('mouseover', function() { 
 
    // do stuff 
 
    
 
    //console.log('do stuff'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-4 image-hover img-opacity"> 
 
    <img class="img-1" src="http://loremflickr.com/320/240" /> 
 
    <p>Lorem ipsum dummy text</p> 
 
</div>

Quelle

2017-04-05 08:20:47 loelsonk

Wie man Hover-Effekt auf das Bild in HTML verwenden?

Antwort

Verwandte Themen