diff --git a/app/assets/stylesheets/my_styles.scss b/app/assets/stylesheets/my_styles.scss index f75152c..14e2342 100644 --- a/app/assets/stylesheets/my_styles.scss +++ b/app/assets/stylesheets/my_styles.scss @@ -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; -// } diff --git a/app/views/packages/details.slim b/app/views/packages/details.slim index 9daed04..d533eea 100644 --- a/app/views/packages/details.slim +++ b/app/views/packages/details.slim @@ -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