Hover Grow and Shadow

Permalink
Anybody know how to accomplish the hover grow/shadow effect? So, when you hover, the image gets a bit bigger and a light shadow appears under it. I'm in 5.7.5. Thanks in advance!

HeinoM
View Replies: View Best Answer
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi HeinoM,

I made an example of how you could create the effect.
http://codepen.io/anon/pen/GJLGdd...
HeinoM replied on at Permalink Reply
HeinoM
That looks great! I;m not sure where to put the code though if I'm using and Image block.
Should I use a Content block instead?
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
1. You would use the Image block and add a custom class of "grow-shadow".
Design & Custom Template > gear icon (Custom CSS Classes, Block Name, Custom Templates and Reset Styles) > Custom Class

2. You would add the following CSS to your Custom CSS.
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button
.grow-shadow img {
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.grow-shadow img:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
      transform: scale(1.2);
  box-shadow: 10px 15px 7px #C7C7C7;
}
HeinoM replied on at Permalink Reply
HeinoM
That worked great! Thank you so much.
grafoman replied on at Permalink Reply
What about an inner shadow? That doesn't seem to work.
Steevb replied on at Permalink Reply
Steevb
Add 'inset'.
box-shadow: inset 0px 0px 0px black
grafoman replied on at Permalink Reply
Tried that, nothing changes, seems it has something to do with the image block..
Steevb replied on at Permalink Reply
Steevb
okay try this mini howto:

Add this css style somewhere:
.shadow{
max-width: 100%;
float: left;
position: relative
 }  
.img-resonsive{
float: left
}  
.shadow:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;


Then click image block and click ‘Design & Custom Template’ then click on gear icon and type ’shadow’ in the ‘Custom Class’ box then click the blue underlined ’shadow’ then ‘Save’ and ‘Publish’.
grafoman replied on at Permalink Reply
I can see the shadow now, but it removes all other functionality for the image block: link is broken, hover image is not visible.
grafoman replied on at Permalink Reply
I managed to fix by adding
pointer-events: none;


Thank you!
Steevb replied on at Permalink Reply
Steevb
Sorry didn't know you had other stuff going on.

Modified css to allow link, but no hover swap.
.insetShadow {
margin:10px auto;
width: 100%;
float: left;
clear: both;
padding: 0
}
.insetShadow a{
float: left;
position: relative;
max-width: 100%
}
.insetShadow a:after {
content: "";
position: absolute;
MoonGrab replied on at Permalink Reply
MoonGrab
box-shadow is a terrible think to animate because it triggers a myriad of repaints.

Check this out:http://tobiasahlin.com/blog/how-to-animate-box-shadow/...