Forums

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

Home Forums CSS Aligning an image between 3 points

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #263888
    grimski
    Participant

    First up, I’m not sure if this is possible but I’m really keen to get peoples thoughts on a solution for this problem. I only need to display this effect on desktop so smaller screens aren’t an issue as it’ll be hidden.

    Basically I have a line that needs to animate from a certain point across to a content block. The problem is there are lines that point to the top and bottom of the content area – which will obviously change depending on the content within it.

    Here’s the CodePen:

    https://codepen.io/moy/pen/gopXEa

    As you can see when you scroll down the page items animate line, like the line. As the images are items of clothing the position of each dot (where the lines stems from) will be different. To make matters more awkward this means the height/width of each graphic/line will also be different.

    So basically the line should start from the circle and then expand until the top line is roughly inline with the heading and the bottom line roughly at the bottom of the text/container. That blue outlined square will be an icon which it’ll probably pass through.

    I thought SVG could be a good approach, if there’s away to stretch the image without the thickness of the line changing? But I haven’t had much luck. Also, if you notice the 2nd image animating from the right slides in incorrectly, not sure what’s causing that – just so you know!

    Does anyone have any ideas on this? Or is it just a matter of creating 4 separate images of different heights/widths and aligning them to the content the best I can? Is there no change this can work responsively? At least from say 800px + as each row will be stacked and the lines hidden after that?

    Hope someone can help – a bit of a tricky one!

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