Not being able to use ABSOLUTE on one image

Tagged: 

Author Posts

zholy9

Hi.

I had some difficulty to use “position:absolute” on one of the images here : http://www.come2speak.com/oferta

If you scroll down (to Business) you will see a B&W picture and once you hover over it, it will be in colour. In the “business section” there is :
1x column (ID=ideac)
2x pictures (stacked underneath each other)

I wanted to “cover” the coloured image with the B&W (to put it on top of the coloured one) by using the “position:absolute”. But I couldn’t do it with MT, as once I set the position to absolute, the image disappeared and didn’t react to any settings (left,top,bottom,right). But when I typed the CSS manually in BB, it worked like a charm.

Could you tell me please, what did I do wrong? Is there “again” some option in settings, that I’m not aware of ?

Thank you in advance, for your reply.

Zdenek


Sebastian

Hey Zdenek,

This one is a bit tricky to answer with the information I currently have. I’m not sure what you previously tried using Microthemer (including the code it generated), and how this compares to the custom code you added to Beaver Builder. Also, I can only see one black and white image in the HTML source code, which becomes color on hover. Not the two you describe.

One thing I can say, in response to your description about the absolutely positioned image disappearing, is that this may have been solvable by setting position:relative on the direct parent element of the image. Position:absolute is always relative to the first parent with a position value that isn’t static. This may have been a parent element quite high up in the chain e.g. the body tag. Thus causing the image to disappear.

Your current solution creates a nice effect of changing the black and white image to color, perhaps using JavaScript? Did you want to create this exact effect, but using Microthemer (CSS). Or do you wish to achieve an additional effect with Microthemer?

Apologies for the number of questions, I’m just trying to understand your goals.

Thanks!
Sebastian


zholy9

Hi Sebastian.

Please, have a look on this video – maybe you can spot why it wasn’t working + let me know, if you can find in your history the PW to access my site.

https://www.useloom.com/share/a5e93143552c46d19ef8bd5f3f7588ea

Thanks.

PS : I’ll delete the video, once you see it – please confirm by writing to me. Thx


Sebastian

Hey,

Thanks for making the great video. I understand what you mean now. You can delete the video, which I have downloaded.

I didn’t keep the access details for your site. Please could you send them again via our secure contact form? I will then solve the issue in Microthemer and explain what needed to be done.

Thanks!
Sebastian


Sebastian

Thanks for sending access details. I’ve now got things working in Microthemer, the same way you had with your custom code.

I think the main difference was that you were applying position:absolute to the image in MT, while your custom code applied position:absolute to the image’s container element: #IdeaBW

So the reason you could get it working with custom code, but not Microthemer, was because you were using different CSS selectors.

In this particular case, applying absolute positioning to the image caused it to disappear because the image had a max-width rule of 100%. And when the image was taken out of the flow of the document, due to position:absolute, it’s parent element’s width became 0 pixels. And so the image’s maximum width became 100% of 0. Nothing!

I hope that helps. Please let me know if you need further explanation.

Thanks!
Sebastian

P.S. you should be able to remove the custom code you applied in BB now.


zholy9

Thank you so much, Sebastian, for that clarification. I can see now, the ID=IdeaBW wasn’t applied to the PICTURE (as I thought) .

Will keep an eye on this one, in the future (before writing to you again, HAHA 🙂 ) … thanks again a lot.

Kind regards, Zdenek


Sebastian

You’re welcome Zdenek, I’m always happy to help.

Cheers,
Sebastian

You must login or register to reply to this topic.