Skip to main content

Forums

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #267801
    jackie_eliz
    Participant

    Hi,
    Im hitting a bit of a wall with this and I realize the answer is probably super simple. I taught myself css & html, so I am sure I just might be missing something. I am currently designing a portfolio website with images displaying in a horizontal scroll, kind of like this: https://static.squarespace.com/static/ta/51e04beae4b0732384e4e65f/14/assets/nav-left.jpg?format=2500w

    What I have works well so far in terms of the scroll, except what I am trying to add, is an image overlay effect similar to this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

    I would still want the images to be displayed side by side with no margin or padding, all I would want is when you hover over the image it would have a color overlay and text link that leads to another page. The issue I am running into is there seems to be incorrectly coding my divs so it starts pushing my images to the bottom instead of maintaining a horizontal structure. I have no clue how to resolve this so any suggestions or advice would be super appreciated!

    Here is my code so far without the overlay effect: https://codepen.io/anon/pen/YeMMwe

    #267806
    Beverleyh
    Participant

    The issue I am running into is there seems to be incorrectly coding my divs so it starts pushing my images to the bottom instead of maintaining a horizontal structure. I have no clue how to resolve this

    If you’re using a div to wrap each image, note that their default display state is block. Block-level elements will take up 100% width of their container, hence it pushing images down to show only one per line. You can try floating the divs with float: left;, but remember to clear the float otherwise the layout will collapse: overflow: hidden; applied to the gallery container element should be enough.

    As an alternative to floats, you could also try flexbox to structure your div/imgs inside the gallery https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    #267850
    jackie_eliz
    Participant

    Thank you Beverleyh! I will give both a try, do you recommend one over the other for efficiency in terms of keeping the code neat?

    #267851
    Beverleyh
    Participant

    Not really – both ways will do the job. I think you’ll need an extra wrapper element between the current gallery container and all the images, if you want to use the flexbox structure. Flexbox has many more layout possibilities, but it can also be a bit challenging (see the earlier linked cheat sheet), so for something structurally simple like this, I’d probably stick to floats.

    #267855
    jackie_eliz
    Participant

    Thank you so much! I am so sorry for all the questions just want to make sure I’m getting it. So I started to follow the flexbox structure and was able to get it to this point:
    https://codepen.io/anon/pen/YeMMwe

    So I need to add a second wrapper before inserting this code:
    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

    Again thanks for all the help!

    #267856
    jackie_eliz
    Participant

    Sorry, here is the correct link: https://codepen.io/jackie_eliz/pen/ddERPP

    #267960
    Xiija
    Participant

    cool idea :)
    I forked it to play with, and got a lil farther, but couldn’t figure out how to
    make the link text color work in the overlay :(
    i made the overlay a hex color #eaf6ff .. and added a transparency so it’s #eaf6ff80;
    You can google Hex Opacity Values if thats the way you want to go :)

    https://codepen.io/Xiija/pen/LQwxdw?editors=1100

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