Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Issue hover: doesn’t scale properly

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #279616
    mafiamaria
    Participant

    I have an issue with hover. I want my page to show an image, and when you hover over, it changes to a color and text on top. So far, so good. The problem is that I can’t seem to get the hover to fit the same container as the images. When the browser window gets smaller, the image also gets smaller. But the image it should show on hover, doesn’t seem to follow the same rules. It works when the browser window is big, but looks strange when it gets smaller. You can see on the webpage I have tried several things: http://folk.ntnu.no/manordt/wu1/Heimeside/arbeid.html
    I have also tried using text in css, but it won’t scale along with the original photo. The problem then is that I have a max-width of the container, because I don’t want it to be bigger than a certain size. I tried using “font-size: 4vw”, but then it doesn’t stop scaling, and gets to big. Appreciate all the help I can get!

    #279618
    Beverleyh
    Participant

    To attract helpful responses, try mocking up the issue in a reduced CodePen demo – code is easier for us to troubleshoot there (we’re not restricted to the developer toolbar), and doesn’t come with the weight of all the extra code and distractions of a full website. Note that we only need the minimal amount of CSS and HTML to illustrate the problem. We don’t need your whole codebase.

    #279619
    razavinpco
    Participant

    hi every body i had read your text and i am so happy to be here
    i had a same issue too
    but i don’t know exactly what should i do

    [URL=”http://www.npco.net/”%5Dطراحی وب سایت[/URL]
    [URL=”https://www.limotorsh.com/”%5Dطراحی سایت[/URL]

    #279620
    mafiamaria
    Participant

    Thank you for your response!

    I posted only the part of the code I have a problem with over to a codepen now. Used random images. I made three images in a row to show some of the different things I have tried out.

    https://codepen.io/maria-nordtveit/pen/WYaGNb

    #279621
    Beverleyh
    Participant

    I got rid of image 2 and just used 1 and 3 to demo the different ways you can do this. See the comments in the CSS for changes https://codepen.io/anon/pen/pQxNja

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.