Sha256: a62a58bfd26f5df2fea85c37ef16000bc72a3f54ea13ba1cf8d343398093e94f
Contents?: true
Size: 1.31 KB
Versions: 88
Compression:
Stored size: 1.31 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;
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-link: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;
}
Version data entries
88 entries across 88 versions & 1 rubygems