Streaming live at 10am (PST)

Image in the middle of a text block / paragraph


#1

Hello eveyrone. I was wondering if you guys could help me improve my knowledge. I’m pretty new to conding and etc, but I’m willing to go out of my way a learn new things.

I’d like to know if there’s a way I can accomplish the following image through webflow:

Footer%20-%20Img%20and%20Txt

Here’s the code:

<div class="footer_message f_message_left">
							Copyright 2018 <a href="http:oticafirenze.web7047.uni5.net" target="_blank">Ótica Firenze </a>   |   Todos direitos reservados -							<div class="ass">
								Desenvolvido por: <a class="assinatura" href="http://www.netuna.com.br" target="_blank"><img src="http://oticafirenze.com.br/wp-content/themes/Firenze/assets/images/assinatura.png" alt="NETUNA Digital" title="NETUNA Digital"> Netuna</a>
							</div>
						</div>

It’s basically a text with the logo in the middle of it. The logo has a spinning effect when hovered, but I’m pretty sure that I know how to do it.

My question is: How can I have a text block with an image in the MIDDLE of it? I was thinking about ‘float’, but it seems that it only works on the sides of a container, not in the middle.


#2

Yes.

Drag a text or paragraph and style it as it should be. In the text, select the word Netuna that supposed to become a link. Click on the brush icon. Unselect everything, then select just this new sub-element (span). Give it a class (like .fishlink). Set it to red, then display:inline-block, then add a padding left of… 30px or so. Then add a background image, chose the fish, set it to not repeat and to align center on the left. Adjust the size and the padding.


#3

Thanks for your answer, Vincent. What you’ve said made sense. However, there’s one thing that I’m curious about:

I suppose that it isn’t possible to add “3D” transforms to background images, right? The fish rotates around himself when hovered on the original website, but I’ve never seen anything related to Z-Axis and Backgrounds images here while watching the tutorials.

If you wanna see the actual website, here it is (Don’t mind the language, it’s Portuguese): http://oticafirenze.com.br/

If you navigate to the footer of the page, you’ll see what I mean.

It is a simple effect and not even that important for the website purpose, but I want to learn as much as I can.


#4

Não me importo de ler um pouco de português, gostava de estar no Porto neste momento, hoje está tanto frio onde estou!

Right.

So be it, don’t use a text link + spn, but a more complex element. Start with a link block, and inside put a div sized to your fish desied dimension. Add the fish as BG or image inside. Add the text along the div, set the link block to flexbox horizontal and style everything as desired.

Don’t use a Hover state with transform for the fish rotation, because it would only affect the fish and not trig when the text is hovered.

So select the link block and add a hover interaction, that will rotate the fish div and change the text color.


#5

Hey Vincent! Your recommendation was spot on, thank you for that.

Footer%20-%20Correct%20Positioning

I’m pretty new to animations on websites, so I’m probably doing something wrong, so here’s what’s happening. The flipping is working as it should be ( whenever I hover over the Link Block, the fish flips). However, that animation is only happening once. I need to reload the page so it can work again for a single time. Here are the screenshots from the layout settings that I created:

Can you please (This is my last request, I swear haha), point out to me what am I doing wrong? I’ve tried to find the answer on the internet, but there was no luck for me.

Muito obrigado, e boa sorte com o clima frio. Aqui no Brasil tenho que lidar com meus 25ºC todos os dias do ano .


#6

What happens is expected, so far. Computer animation is dumb and does what you program, and only that. Especially:

  • elements transformed by an animation never return to their original state by themselves, if you want an animation to repeat, you need to program the animation, and its reversal
  • displacement and rotations aren’t incrementals. If you tell an abject to rotate 359°, it goes from 0 to 359°. If you tell it t rotate 359° again, it does nothing because it’s already at 359°, it doesn’t add 359° more. 359 is a position, not just a value. That’s why I said 359 and not 360, because 360=0 and there’s a risk that the element does nothing because it’s already at 359°.

What you need to do is to define a HoverOUT animation too, that will put the element back to 0°. And the color of the text back to whatever it was.

Está tudo bem, nós sobrevivemos, fizemos vinho amassado com especiarias para a nossa loja de bicicletas ao ar livre: D!

E eu não falo português, uso um tradutor automático, mas adoraria saber como falar: D


#7

This info is of huge importance! Thank you for that. Everything worked like a charm haha. Thanks again for helping not only me but all the community.

I’m glad to know that you guys know how to handle the cold weather. At least you guys have the chance to go skiing very often. The closest ski range to me is in Argentina, and it’s quite expensive.

If you want to check the final result, feel free to do so: https://replica-do-site-da-otica.webflow.io/

It’s my first website, so nothing fancy or super complex. I’m basically learning how Webflow, HTML and CSS work.

Thank you