Créer un effet de zoom sur une image au survol à l'aide de CSS ?

Question

Créer un effet de zoom sur une image au survol à l'aide de CSS ?

Demandé el 2 de Avril, 2013: Quand la question a-t-elle été
465103 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie actuellement de créer un effet de zoom au survol d'une de mes quatre images. Le problème est que la plupart des exemples utilisent généralement des tableaux ou des divs masqués pour appliquer une sorte d'effet.

Voici un exemple qui met en œuvre ce que je souhaite este .

Ce site Voici mon code jusqu'à présent.

HTML

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>

CSS

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}

#menu img {
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
}

.blog {
    height: 375px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.blog:hover {
    cursor: pointer;
    height:475px;
    width: 350px;
}

.music {
    height: 375px;
}

.projects {
    height: 375px;
}

.bio {
    height: 375px;
}

Demandé el 2 de Avril, 2013 par KingPolygon

Answer 1

3 Réponses

Answer 2

0voto

Murat Kezli Points 81

@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
 body{ font-family: 'Muli', sans-serif; color:white;}
 #lists {
   width: 350px;
   height: 460px;
   overflow: hidden;
   background-color:#222222;
   padding:0px;
   float:left;
    margin: 10px;
 }

 .listimg {
   width: 100%;
   height: 220px;
   overflow: hidden;
   float: left;

 }
  #lists .listimg img {
   width: 350px;
   height: 220px;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 #lists:hover{cursor: pointer;}
 #lists:hover > .listimg img {
   -moz-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
   -webkit-filter: blur(5px);
   filter: blur(5px);
 }

#lists h1{margin:20px; display:inline-block; margin-bottom:0px; }
#lists p{margin:20px;}

.listdetail{ text-align:right; font-weight:200; padding-top:6px;padding-bottom:6px;}

<div id="lists">
<div class="listimg">
  <img src="https://lh3.googleusercontent.com/WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj_yK5thdtXNDKoZcUOHlegFhx7=w1920-h914-rw">
</div>
<div class="listtext">
<h1>Eyes Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>Click for More Details...</p>
</div>
</div>

<div id="lists">
<div class="listimg">
  <img src="https://lh4.googleusercontent.com/fqK7aQ7auobK_NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym_3988798NlkGDzu0MWnR-7nxIhj7g=w1920-h870-rw">
</div>
<div class="listtext">
<h1>Two Frogs Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>More Details...</p>
</div>
</div>

Répondu el 19 de Octobre, 2017 par Murat Kezli (81 Points )

Answer 3

0voto

Mohidul Points 11

<!DOCTYPE html>
<html>
<head>
<style>
.zoom {

  overflow: hidden;
}

.zoom img {
  transition: transform .5s ease;
}
.zoom:hover img {
  transform: scale(1.5);
}

</style>
</head>
<body>

<h1>Image Zoom On Hover</h1>
<div class="zoom">
  <img src="/image-path-url" alt="">
</div>

</body>
</html>

Répondu el 29 de Mai, 2019 par Mohidul (11 Points )

Answer 4

-3voto

Giri Points 27

Ajoutez la bibliothèque JavaScript jQuery ainsi que les fichiers jquery.zbox.css et jquery.zbox.js à votre page Web.

<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>

Ajoutez un groupe de vignettes avec des liens pointant vers les images en taille réelle dans la page Web.

<a class="zb" rel="group" href="1.png" title="Image 1">
  <img src="thumb1.png">
</a>
<a class="zb" rel="group" href="2.png" title="Image 2">
  <img src="thumb2.png">
</a>
<a class="zb" rel="group" href="3.png" title="Image 3">
 <img src="thumb3.png">
</a>

Appelez la fonction sur le document prêt. C'est tout.

Dans la source de la vue, faites :

$(".zb").zbox();

Répondu el 20 de Avril, 2016 par Giri (27 Points )

Créer un effet de zoom sur une image au survol à l'aide de CSS ?

HTML

CSS

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Créer un effet de zoom sur une image au survol à l'aide de CSS ?

HTML

CSS

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: