Fix stretched images and animation
This commit is contained in:
parent
87d266813d
commit
f5f6e4960b
2 changed files with 15 additions and 25 deletions
|
|
@ -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;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue