Help questions about box shadow and transition duration :)

[summerwine]

Hello! I'm currently working on a bbcode and I need some guidance

This is what I have as of right now (just started):

Spoiler: coding

[nobr]
[class=profilepic]
background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg');
background-size: cover;
width: 300px;
height: 500px;
border-radius: 8px;
box-shadow: 10px 10px 10px #808080;
[/class]

[class name=profilepic state=hover]
transition-duration: 3s;
background: url('https://66.media.tumblr.com/91a519ebb467e2f906d5321d295188ee/tumblr_oxcyxhcA7q1v4az0po1_500.jpg');
width: 300px;
height: 500px;
background-size: cover;
[/class]
[/nobr]

[Row][Column=span1][div class=profilepic] [/div][/Column][/Row]

[class=profilepic] background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg'); background-size: cover; width: 300px; height: 500px; border-radius: 8px; box-shadow: 10px 10px 10px #808080; [/class] [class name=profilepic state=hover] transition-duration: 3s; background: url('https://66.media.tumblr.com/91a519ebb467e2f906d5321d295188ee/tumblr_oxcyxhcA7q1v4az0po1_500.jpg'); width: 300px; height: 500px; background-size: cover; [/class]

[div class=profilepic] [/div]

Question #1: At the bottom right of the picture it looks like the box shadow doesn't curve with the image. I was wondering if there was a way to put a box shadow radius to match the curve of the image?
Question #2: When you put your mouse over the image it transitions nicely, but removing your mouse the image doesn't transition back. Is there any way to have the image transition back to the original pic?

I hope my questions make sense. I took a break from rpnation and forgot a lot about bbcoding and bbcode+. x(

 

[Alteras]

Try putting a bit of margin bottom below it.

You need to put the transition property in the class without the hover.

 

[summerwine]

Can you show me an example of the margin?

Also, I tried doing what you said and it doesn't work. Am I doing something wrong?

Spoiler: code

[nobr] [class=profilepic] background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg'); background-size: cover; width: 300px; height: 500px; border-radius: 8px; box-shadow: 10px 10px 10px #808080; transition-duration: 3s; [/class] [class name=profilepic state=hover] background: url('https://66.media.tumblr.com/91a519ebb467e2f906d5321d295188ee/tumblr_oxcyxhcA7q1v4az0po1_500.jpg'); width: 300px; height: 500px; background-size: cover; [/class] [/nobr] [Row][Column=span1][div class=profilepic] [/div][/Column][/Row]

 

[Alteras]

In the main class, you can put in margin-bottom: 15px.

Looking at the code on desktop instead of my phone now, there are a few things that can be done. You should use transition: all 3s; instead of just transition-duration. This will allow your code to figure out what is being changed.

Also, animating background-image isn't properly supported in some browsers, so you might want to look into a different solution, such as using multiple divs and fading those divs in and out.

 

[summerwine]

Thank you! the margin-bottom worked

So, my original question was if there was a way to have a transition back to the original image once you remove your mouse from it. Is that possible?

 

[blackout]

hey there summerwine! so, i'm sure that there is actually a way you can do this with hovers, but i find it easier to work with animations. essentially, the animations are just dictating a repeat of what you told the hovers to do but in a different form. the scripts i added tell the code to add or remove the animation based on whether the mouse is on the image or not. you can adjust the speed by tweaking the number "3s" after the animation name in the classes "shift" and "unshift". just let me know if you have any issues!

Spoiler: live

[class=profilepic] background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg'); background-size: cover; width: 300px; height: 500px; border-radius: 8px; box-shadow: 10px 10px 10px #808080; margin-bottom: 20px; [/class] [class=shift] animation: {post_id}shift 3s; animation-fill-mode: forwards; [/class] [class=unshift] animation: {post_id}unshift 3s; animation-fill-mode: forwards; [/class] [animation=shift] [keyframe=0] background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg'); background-size: cover; width: 300px; height: 500px; [/keyframe] [keyframe=100] background: url('https://66.media.tumblr.com/91a519ebb467e2f906d5321d295188ee/tumblr_oxcyxhcA7q1v4az0po1_500.jpg'); width: 300px; height: 500px; background-size: cover; transition-duration: 3s; [/keyframe] [/animation] [animation=unshift] [keyframe=0] background: url('https://66.media.tumblr.com/91a519ebb467e2f906d5321d295188ee/tumblr_oxcyxhcA7q1v4az0po1_500.jpg'); width: 300px; height: 500px; background-size: cover; transition-duration: 3s; [/keyframe] [keyframe=100] background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg'); background-size: cover; width: 300px; height: 500px; [/keyframe] [/animation] [script class=profilepic on=mouseenter] addClass shift removeClass unshift [/script] [script class=profilepic on=mouseleave] removeClass shift addClass unshift [/script]

[div class=profilepic] [/div]

Spoiler: code

[nobr]
[class=profilepic]
background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg');
background-size: cover;
width: 300px;
height: 500px;
border-radius: 8px;
box-shadow: 10px 10px 10px #808080;
margin-bottom: 20px;
[/class]
[class=shift]
animation: {post_id}shift 3s;
animation-fill-mode: forwards;
[/class]
[class=unshift]
animation: {post_id}unshift 3s;
animation-fill-mode: forwards;
[/class]

[animation=shift]
[keyframe=0]
background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg');
background-size: cover;
width: 300px;
height: 500px;
[/keyframe]
[keyframe=100]
background: url('https://66.media.tumblr.com/91a519ebb467e2f906d5321d295188ee/tumblr_oxcyxhcA7q1v4az0po1_500.jpg');
width: 300px;
height: 500px;
background-size: cover;
transition-duration: 3s;
[/keyframe]
[/animation]

[animation=unshift]
[keyframe=0]
background: url('https://66.media.tumblr.com/91a519ebb467e2f906d5321d295188ee/tumblr_oxcyxhcA7q1v4az0po1_500.jpg');
width: 300px;
height: 500px;
background-size: cover;
transition-duration: 3s;
[/keyframe]
[keyframe=100]
background: url('https://66.media.tumblr.com/1b2bcfcbad52373cca4d27c9888c5e48/tumblr_oxcyxhcA7q1v4az0po2_500.jpg');
background-size: cover;
width: 300px;
height: 500px;
[/keyframe]
[/animation]

[script class=profilepic on=mouseenter]
addClass shift 
removeClass unshift
[/script]

[script class=profilepic on=mouseleave]
removeClass shift
addClass unshift
[/script]

[/nobr]

[Row][Column=span1][div class=profilepic] [/div][/Column][/Row]

 

[summerwine]

blackout ahhh thank you so much! Its perfect!

Alteras and thank you for the help with the box shadow!

 

[Alteras]

Yes, if you put the transition property in the main class. The transition property only works if it's part of the div when a change happens. That's why right now, when it is in the hover class, it can transition when hovered. However, when it isn't hovered anymore, the transition property is immediately removed, so there's no transition. By putting transition: all 3s in the main class, any changes made to the class is automatically transitioned regardless of it being hovered or not.

Fated's solution gives you more control over the animation itself.