Editing (v7+)

 

MrKDilkington replied on Aug 13, 2015 at 11:06 pm Permalink Reply

Hi HeinoM,

I made an example of how you could create the effect.
http://codepen.io/anon/pen/GJLGdd...

HeinoM replied on Aug 13, 2015 at 11:28 pm Permalink Reply

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 Aug 14, 2015 at 12:08 am Permalink Best Answer Reply

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 Aug 14, 2015 at 12:52 am Permalink Reply

That worked great! Thank you so much.

grafoman replied on Feb 9, 2016 at 8:16 am Permalink Reply

What about an inner shadow? That doesn't seem to work.

Steevb replied on Feb 9, 2016 at 9:08 am Permalink Reply

Add 'inset'.

box-shadow: inset 0px 0px 0px black

grafoman replied on Feb 9, 2016 at 9:16 am Permalink Reply

Tried that, nothing changes, seems it has something to do with the image block..

Steevb replied on Feb 9, 2016 at 10:49 am Permalink Reply

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;

Viewing 15 lines of 17 lines. View entire code block.

.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;
box-shadow: inset 0 0 8px black
}

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 Feb 10, 2016 at 3:25 am 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 Feb 10, 2016 at 5:54 am Permalink Reply

I managed to fix by adding

pointer-events: none;

Thank you!

Steevb replied on Feb 10, 2016 at 9:10 am Permalink Reply

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;

Viewing 15 lines of 21 lines. View entire code block.

.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;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset black 0 0 20px /*alter number 20 to increase or decrease blur*/
}

VPenkov replied on Feb 10, 2016 at 4:28 am Permalink Reply

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/...

ranagu replied on May 1, 2019 at 3:22 am Permalink Reply

https://www.welookups.com/css/default.html