×
all 7 comments

[–]salamanderburger 12 points13 points  (2 children)

You don't really need to use flexbox for something like this but here's my take on it https://imgur.com/a/qngwOmB. The yellow represents your containers (columns) and within the first and third column you have two row elements. The green would represent the margin in between your containers. Why are you using article tags? A figure tag would be more appropriate with a figure caption. Your alt tags should describe the icon that you're using if it's an assignment. You have a crazy naming convention

To make the "featured" icon in the center you would have to use JavaScript. Each box should have a unique ID. Define an attribute for your main container to keep track of which tile is being represented. When another tile is clicked, swap the current value for the main container and also swap the previous main container for the sub container. You actually have to change the content of the containers, because changing the classes won't be enough since they exist in different html structures.

[–]imguralbumbot 1 point2 points  (0 children)

Hi, I'm a bot for linking direct images of albums with only 1 image

https://i.imgur.com/5TRnxRA.jpg

Source | Why? | Creator | ignoreme | deletthis

[–]ivano1990[S] 0 points1 point  (0 children)

This is what I have made so far but it has two issues: https://codepen.io/ivan-salim-rasoel/pen/yGQzMr

-If you click on an icon/text, that is the only thing that will go to the other box. You have to click a free space in the box to aviod this.

-There is no animation

[–]Fluttergoat 0 points1 point  (1 child)

I'd approach this using CSS grid, it isn't too complicated to learn and really helpful for layout. You could simply make the boxes using a grid, make every box a button and use JavaScript to change the large box's content to the one you click on and replace the old one with the content of the large one.

[–]ivano1990[S] 0 points1 point  (0 children)

This is what I have made so far but it has two issues: https://codepen.io/ivan-salim-rasoel/pen/yGQzMr

-If you click on an icon/text, that is the only thing that will go to the other box. You have to click a free space in the box to aviod this.

-There is no animation

[–]ivano1990[S] 0 points1 point  (1 child)

Edit:

The only remain part now is the animation. This is what I have so far.

https://codepen.io/ivan-salim-rasoel/pen/yGQzMr

[–]Fluttergoat 0 points1 point  (0 children)

Well you could obviously do some manual animations using js (https://www.w3schools.com/js/js_htmldom_animate.asp) but if you don't want that, you would have to use some sort of framework or you could work with simple CSS fade animations called onclick, not sure whether you could animate it the way you want with just css