HTML and CSS text moving

Well hello there everyone firstly I want to apologize, I am not very good in English, so please bear with my English… :slight_smile:

I NEED some help regarding HTML and CSS

Well I imagine for my site that I have 4 Topic-Names one name under the other and if the user goes over the first Topic-name a Picture should come out under the first Topic-Name and the other 3 Topic-Names should move with the Picture and the exact same with the other topic-Names…

I would really appreciate it if some one could help me with it!

Thank you :smile:

Hi @Hira_Muhammad, welcome to the forums.

I’m not sure if anyone here will just do the job for you, but they will be very happy to help you if you have a problem with what you have done so far.

It will be easier for us to help if you show us the code that you have so far for this idea, and maybe a picture of what you want it to look like.

1 Like

Here is the Code and could anyone also tell me how to make sure that the size of the images is the same and everyone with different displays can see the whole picture ???

THANK YOU <3 :blush:

HTML-CODE

<h3><a href="Huracan.html" style="text-decoration:none; color:#FFFFFF; text-align:center;">Huracan<img src="lamborghini-huracan.jpg"</a></h3>
<h3><a href="Aventador.html" style="text-decoration:none; color:#FFFFFF; text-align:center;">Aventador<im(g) src="#"</a></h3>
<h3><a href="Concepts.html" style="text-decoration:none; color:#FFFFFF; text-align:center;">Concepts<im(g) src="#"</a></h3>

CSS-CODE

a img { display:none; }
a:hover img { display:block; }

Before that, there are some errors in your html that you really should fix. Your img tag is not closed. In the second and third links, you have im(g) instead of img. And in those last two, there is no link to an image.

Is this a school assignment?

Please post your code in a “working page”. A “working page” is one that begins with <!doctype html>, ends with , and contains all of the code necessary to demonstrate the problem. You should be able to validate a “working page” and fix most of the errors before you post it, or at least be able to ask questions about them.

Images should have width and height attributes, and alt attribute. We need to know the size of the images when they are displayed.

Is this supposed to be a responsive/fluid layout?

Please write a real working web page and give us an idea what it is supposed to look like. As it stands right now, the snippit of code that you posted cannot work to anyone’s satisfaction.

The W3C CSS Validation Service
https://jigsaw.w3.org/css-validator/

If I’m understanding correctly, what is wanted is accordion view triggered by hover.

I want to think this requires JavaScript.

But dropdown menus can reveal sub-menus on hover so there just might be a way to do this without JavaScript. I’ve been surprised at how much CSS can do more than once.

I would think this can be done with css only.

1 Like

I think the OP deleted his code, and changed his post. This thread really doesn’t make much sense anymore.

Yes, if Hira_Muhammad has found a solution I guess further discussion is moot.

But to restore a modicum of context

HTML-CODE

<h3><a href="Huracan.html" style="text-decoration:none; color:#FFFFFF; text-align:center;">Huracan<img src="lamborghini-huracan.jpg"</a></h3>
<h3><a href="Aventador.html" style="text-decoration:none; color:#FFFFFF; text-align:center;">Aventador<im(g) src="#"</a></h3>
<h3><a href="Concepts.html" style="text-decoration:none; color:#FFFFFF; text-align:center;">Concepts<im(g) src="#"</a></h3>

CSS-CODE

a img { display:none; }
a:hover img { display:block; }

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.