// Styles defining image hover effects: .img-hover__img-wrapper {
margin: 0 0 15px; right: 0;
}
@media (min-width:767px) {
.img-hover__img-wrapper { margin: 0 0 30px; }
}
.img-hover__img-link {
border-radius: 5px; cursor: pointer; display: block; margin: 0 auto; max-width: 400px; overflow: hidden; position: relative;
}
.img-hover__hover {
background: $primary-blue; border-color: $primary-red; border-radius: 5px; border-style: solid; border-width: 5px; height: 100%; position: absolute; transition: opacity ease .5s; width: 100%; z-index: 2; opacity: 0; &--inverse { opacity: .7; }
}
.img-hover__hover:hover, .img-hover__thumb-caption:hover + .img-hover__hover { // Needed to make hover affect work when hovering the thumbnail caption
opacity: .85;
}
.img-hover__hover–inverse:hover, .img-hover__thumb-caption:hover + .img-hover__hover–inverse { // Needed to make hover affect work when hovering the thumbnail caption
opacity: 0;
}
.img-hover__img-ease {
transition: transform 1s ease-in-out;
}
.img-hover__img-hover img.img-hover__img-ease {
transform: scale(1.2);
}
.img-hover__thumb-caption {
color: $white; font-size: 20px; height: 20px; margin-top: -12px; position: absolute; text-align: center; top: 50%; width: 100%; z-index: 3;
}