jQuery Girl
  1. jQuery Girl
  3. Hover Responsive Image – CSS / JQuery
Intereting Posts
Tri Boîte de sélection avec jQuery Animation du redimensionnement des images Remplir les données de succès ajax sur une autre page ne fonctionne pas Les appels JSONP ne fonctionnent pas avec apple-mobile-web-app-capable = «yes» Highcharts – Comment sortinger la catégorie xAxis par total? Jquery pour changer href Est-il possible / juste d’utiliser plusieurs @ Html.AntiForgeryToken () sous 2 formes différentes sur une page? Comment puis-je remplacer les méthodes attachées à l’object ‘this’ à l’aide de Sinon.js? ipad désactiver les options de sélection sans jquery Service de repos d’amorçage printanier | La méthode de requête ‘GET’ n’est pas supscope Rendu d’image (object stream) à l’aide de jquery Comment (en javascript, jquery ou ajax et autres) puis-je charger un fichier texte local ou un fichier xml dans une variable? Désactiver l’autofocus pour bootstrap-select / select2 JQuery Mobile – Afficher un formulaire HTML en ligne Élément JQuery + performance du sélecteur de classe

Hover Responsive Image – CSS / JQuery

J’ai suivi ce tutoriel ( http://mattbango.com/notebook/code/hover–zoom-effect-with-jquery-and-css/ ) et créé un plug-in de survol d’images que j’aimerais utiliser sur mon site. .

Le seul problème que j’ai, c’est que je veux qu’il fonctionne correctement, en redimensionnant les images en fonction de mes 960g.

Voici le violon que j’ai jusqu’à présent: http://jsfiddle.net/Ak94R/6/ 

.viewport { float: left; height: 360px; margin: 0 9px 9px 0; overflow: hidden; position: relative; width: 360px;

}

Au lieu de réduire cette image de 730px / 730px à 360px / 360px, je souhaite la réduire de 200% à 100%. J’ai également besoin que la division principale de découpage (.viewport) soit au 100%. Toute aide serait grandement appréciée!

Ok, je viens de passer quelques minutes pour une solution uniquement CSS . Fait la même chose et aucun JS requirejs. Totalement réactif puisqu’il fonctionne avec des pourcentages. Le HTML ressemble à ceci: 

 
 // I have to use a dummy image to force dimensions   More Info

La partie CSS: 

 .viewport_css { position: relative; max-width: 360px; height: auto; overflow: hidden; } // make sure viewport_css always is square shaped .viewport_css .dummy { width: 100%; height: auto; display: block; } .viewport_css a, .viewport_css a:hover:before, .viewport_css a:hover:after { position: absolute; left: 0; right: 0; } .viewport_css a, .viewport_css a:hover:after { top: 0; bottom: 0; } .viewport_css a:hover:after { content: ''; display: block; z-index: 100; background-color: rgba(255, 0, 0, .5); } .viewport_css a:hover:before { content: 'View'; color: #fff; top: 50%; text-align: center; z-index: 200; margin-top: -0.5em; } .viewport_css .imgwrapper { width: 200%; height: 200%; margin-left: -50%; margin-top: -50%; transition: all 1s ease-in; } .viewport_css .imgwrapper img { width: 100%; height: auto; display: block; } .viewport_css .imgwrapper:hover { width: 100%; height: 100%; margin-left: 0; margin-top: 0; }

J’ai modifié la background-size: 70px 80px; utiliser les requêtes des médias à chaque pause – cela a résolu le problème pour moi