Home › Forums › Basel support forum › Hover effect on Instagram feed

Hover effect on Instagram feed

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 22, 2016 at 3:04 pm #2127

    germanelx
    Participant

    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.

    July 22, 2016 at 4:14 pm #2132

    Artem Temos
    Keymaster

    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;
}
    July 22, 2016 at 5:17 pm #2135

    germanelx
    Participant

    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 🙁

    July 22, 2016 at 5:43 pm #2137

    Artem Temos
    Keymaster

    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
Viewing 4 posts - 1 through 4 (of 4 total)