raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-01 02:03:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add styling and animation to img thumbnail

Browse Source
This commit is contained in:
summerscope
2015-01-15 15:23:36 +11:00
parent 891a9b06a8
commit 9b258e075b
1 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass
View File

@@ -1,9 +1,11 @@
@import branding
@import animations.sass
.darkswarm
products
product
.product-thumb
@include csstrans
position: absolute
top: 3px
left: 0px
@@ -15,7 +17,32 @@
z-index: 999999
background-color: white
overflow: hidden
i
@include csstrans
transition-delay: 150ms
position: absolute
left: 45%
top: 45%
z-index: 99999
color: white
font-size: 1rem
opacity: 0
img
@include csstrans
opacity: 1
@include transform-scale(scale(1))
&:hover, &:focus, &:active
background-color: $clr-brick
i
left: 32%
top: 30%
font-size: 3rem
opacity: 1
img
opacity: 0.5
@include transform-scale(scale(1.1))
@media all and (max-width: 768px)
width: 4rem
height: 4rem