Sha256: 58180d4efcfa773cfce60a341d725487bd74d113800e30bd105aef760d5387e1
Contents?: true
Size: 1.37 KB
Versions: 266
Compression:
Stored size: 1.37 KB
Contents
// 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;
-moz-transition: all ease .5s;
-webkit-transition: all ease .5s;
transition: all 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: all 1s ease-in-out;
}
.img-hover__img-link:hover img.img-hover__img-ease {
transform: scale(1.2, 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;
}
Version data entries
266 entries across 266 versions & 2 rubygems