Fix stretched images and animation

This commit is contained in:
Christoph Haas 2020-10-19 19:12:05 +02:00
parent 87d266813d
commit f5f6e4960b
2 changed files with 15 additions and 25 deletions

View file

@ -491,52 +491,43 @@ a.black
}
/* Display a looking glass / zoom icon on image if they can be enlarged using FancyBox */
.image-with-zoom-icon-container {
.image-with-zoom-icon {
position: relative;
// display: inline-block;
}
.image-with-zoom-icon-container img {
// opacity: 1;
.image-with-zoom-icon img {
display: block;
width: 100%;
margin: auto;
height: auto;
// transition: .5s ease;
// backface-visibility: hidden;
}
@keyframes example {
@keyframes image-with-zoom-icon-animation {
from {opacity: 0}
to {opacity: 0.5}
to {opacity: 0.4}
}
.image-with-zoom-icon-container .magnifying-glass-icon {
transition: .5s ease;
.image-with-zoom-icon .magnifying-glass-icon {
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.5);
text-align: center;
background: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
position: absolute;
font-size: 200%;
line-height: 1;
border-radius: 50%;
padding: 20px;
border: 1px solid #fff;
line-height: 1;
// opacity: 0.3;
animation-name: example;
animation-name: image-with-zoom-icon-animation;
animation-duration: 1s;
animation-delay: 4s;
animation-fill-mode: both;
}
// .magnifying-glass-icon:hover {
// opacity: 1;
// }

View file

@ -24,9 +24,8 @@ h1 =@package.name
/ Fancybox image viewer: http://fancyapps.com/fancybox/3/docs/#usage
a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery'
.image-with-zoom-icon-container
.image-with-zoom-icon
= image_tag(url_for(screenshot.image), alt: screenshot.caption)
.image-with-zoom-icon
= image_tag(url_for(screenshot.image), alt: screenshot.caption)
.magnifying-glass-icon
i.fa.fa-search