Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1201689

    Hi! I got 7 images who overlaps eachother. It’s like a model with 7 levels. When you hover a level the text should appear. I now got two 1/2 columns. In the first column I got one text block with 7 images with the classes: level1, level2, level3…. till level7. In the second column I got 7 text blocks with the class tekst-level1, tekst-level2 etc. When you hover image level1 you have to see tekst-level1. I now got this:

    .level1, .level2, .level3, .level4, .level5, .level6, .level7 {
    opacity: 0.7;
    .level2, .level3, .level4, .level5, .level6, .level7 {
    margin-top: -60px !important;
    .level1:hover, .level2:hover, .level3:hover, .level4:hover, .level5:hover, .level6:hover, .level7:hover {
    opacity: 1;
    .tekst-level1, .tekst-level2, .tekst-level3, .tekst-level4, .tekst-level5, .tekst-level6, .tekst-level7 {
    visibility: hidden !important;
    .level1:hover .tekst-level1 {
    visibility: visible !important;

    But nothing happens when you hover the image. I also tried to give the text a class in stead of the text block and then add p to the css code. But still nothing happens. Can you help me?

    And is it possible that when you open the page level 1 is standard visible? Just like the tabs/accordion? Now I’m only working with hover but maybe I should make it clickable in stead of hover and only make the opacity 1 when hovering.

    Hope you understand me!




    Hi Janneke,

    I have checked your site and it seems to work properly as what you have coded.
    Is this already fixed?

    Best regards,


    Hi Nikko,

    No it’s not fixed. The first images are opacity 1 when hovering, but there is no text when you hover them.

    In the bottom of the page you see the tab element. But that’s not what I want, but that are the texts that should be visible in the images above. That’s why I didn’t remove them.

    So I’m talking about the images 1 to 7 which are standing under eachother NOT next to eachother.

    When you hover an image, the text in the right column should be visible.



    Hi jannnnnneke,

    I see what you meant now, but what you’re trying to accomplish is not possible with CSS, you’ll need to use javascript or jquery to do it.
    For it to work on CSS tekst-level1 should be inside level1 but since they are on separate blocks CSS is not possible.

    Best regards,


    I’ve created it with a tab plugin (Everest Tab in my case) Thanks!



    Great, I’m glad that you found a solution and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.