Hover effect on Instagram feed

How do you get the dark effect with the > symbol on your Instagram feed of the wine template?? Do you set that by tinkering with the custom css and custom js inside of the Instagram plugin or from somewhere else? If you use a special code for that could you please share? I love it.

Hello,

We made this effect just with a few lines of CSS code without any JS. Here you have it 🙂

/** ------------------------------------------------------------------------------------------------
* INSTAGRAM 
* ------------------------------------------------------------------------------------------------ */
.instagram-widget .instagram-pics li {
  width: 33.33%;
  margin-bottom: 0;
  float: left;
  text-align: center;
  position: relative;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
.instagram-widget .instagram-pics li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.instagram-widget .instagram-pics li .wrapp-pics {
  position: relative;
  overflow: hidden;
}
.instagram-widget .instagram-pics li .hover-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
.instagram-widget .instagram-pics li .hover-mask:after {
  content: "\f105";
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: -20px;
  width: 100%;
  font-family: "FontAwesome";
  color: white;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -sand-transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.instagram-widget .instagram-pics li:hover > .wrapp-pics > .hover-mask {
  background-color: rgba(0, 0, 0, 0.7);
}
.instagram-widget .instagram-pics li:hover > .wrapp-pics > .hover-mask:after {
  visibility: visible;
  opacity: 1;
  left: 0px;
}
.instagram-widget .instagram-pics:after {
  content: "";
  clear: both;
  display: block;
}

Where am I supposed to paste this? I’ve tried both global CSS and Instagram widget Custom CSS but I don’t see any effect going on 🙁

How did you place your instagram widget? You need to use our Visual Composer element “Instagram” to have this effect. If you don’t see it so we need to take a look at your web-site if you want us to help you.

[Author]

Posts