Thumbnail widget instagram

Ajouter un hover sur les vignettes du module Instagram d'e-monsite

Très récemment e-monsite a modifié son widget Instagram afin d'y apporter plus de fonctionnalités. Cependant on ne retrouve pas d'animation au passage de la souris. Laurie nous a envoyé son astuce pour résoudre cela !

Un hover sur les vignettes Instagram

Dans le langage web, un hover est l'apparence d'un élément lorsque l'on passe la souris dessus. Dans notre trick sur la modification de l'apparence des réseaux sociaux, le hover est utilisé pour changer le style des boutons au survol de la souris par exemple.

Laurie, aka La Petite Rapporteuse, nous propose donc d'ajouter un style au survol des vignettes du widget Instagram d'e-monsite. Vous pouvez d'ailleurs voir l'astuce en action dans la sidebar de son site.

Ce trick est optimisé pour les versions PRO d'e-monsite.

Widget Instagram e-monsite

Voici le code CSS :

.instagram-grid li {
position :relative;
}
.instagram-grid .media-overlay:hover {
background-color: rgba(0,0,0,0.4); /*On définit la couleur de fond*/
}
.instagram-grid .media-overlay > * {
color: rgb(255, 255, 255); /*Ici remplacer la couleur de l'icon*/
}

Et le code JavaScript utilisant jQuery à coller dans les zones éditables :

$(document).ready(function(){

$('.instagram-grid').find("a").append('<span class="media-overlay"><i class="fa fa-search fa-2x"></i></span>');

})

Un grand merci à Laurie pour son code et d'ajouter sa pierre à l'édifice dans la construction de la communauté d'entraide pour e-monsite. :)

Nouveau : le Live Tricks

Chez EMS Tricks nous essayons de simplifier au mieux l'utilisation de nos astuces, c'est pourquoi nous lançons la catégorie de page "Live Tricks" afin de vous montrer en live l'utilisation de certains tricks qui ne sont pas utilisés de base sur notre site !

Voici le tout premier avec le widget Instagram : Live Tricks du widget Instagram

N'hésitez pas à faire comme Laurie et à nous contacter et/ou nous proposer ou demander vos trucs et astuces pour sites e-monsite !

overlay hover javascript instagram webdesign blog css