Nic727

Hi, I have two questions about CSS transition. First of all, I saw a lot of people doing animation with CSS3 like here ; http://codepen.io/Eliteware/pen/azZEeO I really like button 7, but the problem is that it use border to achieve that. Do you know how to make the same animation without border, or at least make something working with any image size? The other thing is with my current transition. div class="colonne-droite"> <div class="effect"> <img src="images/musee01-2.jpg"> <div class="info"> <h3>Gino Severeni</h3> <p>Italie, 1883-1966</p> </div> </div> <div class="effect"> <img src="images/musee01-3.jpg"> <div class="info"> <h3>Huile sur toile</h3> <p>1910-1911</p> </div> </div> </div> img{ display:block; width:100%; transition: ease-in-out 0.7s; } .effect{ position: relative; overflow:hidden; } .info{ opacity:0; color:white; position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: ease-in-out 0.7s; } .effect:hover .info{ opacity:1; } .effect:hover img{ transform: scale(1.3);; opacity:0.5; } So my transition ease-in-out, is it possible to put it on effect div? I tried and it didn't work, so I need to put this transition to each element the hover apply. It's a bit weird, because the transition is active when effect div is in "hover" state. Thank you

Does it exist a code that kind of randomise width of the divs between 1% and 100% and stop to match the same height?

I think I will keep %, because calculing aspect ratio will be so hard... I think I will just try to crop all my image to be the same... Sad that there is no better idea than that to make something working with different aspect ratio like :

I found https://kartikprabhu.com/articles/equal-height-images-flexbox Could be nice to find aspect ratio automatically with CSS... This idea look good, but it's the same as the one above.

So Javascript doesn't exist for this kind of thing (if I have different ratio)... I have to do everything manually with CSS. Could it work with Flexbox? Or can I just have height with % with body height 100% and set width to auto? If not, I will just change my layout with big image on top with two small images bellow.

Because if I change image ratio, because I want to cut something or whatever reason, it will stop working. I don't know if it's working if for example, we take the div with the largest image, start it at 100% and reduce it with JS and with the second div, we start at 0% and go up. After that just stop when the two divs have the same height. But I don't know if something like that exist... Also it will need decimal.

Can you make a codepen? It will help me understand. But there is no way with Javascript to kind of find height of each div and change width dynamically to make the two divs equal height? Like that if my images are changing ratio, it could work the same... I created a question on stackoverflow, but it doesn't seem to work at all...

Right, but what elements are you talking about lol. What styling should I put to what?

I'm not sure to understand about the 6th element...

Will look into that tomorrow. The first 3 images are all the same size. The other one I can edit them. But I don't understand my image border. Whatever, will try some stuffs tomorrow.

Yes, but I'm asking if someone know the code for that? I'm not good in JS... Also, you can look my code live here : http://codepen.io/anon/pen/MygaEB I have some weird border. I was going to add kind of small border between images, but I saw that I have automatic weird border. I tried with margin 0px on image, but doesn't work Also if I remove background color, I'm unable to add a border to my images.

yes, but it wasn't what I was looking for. My think could work without masonry, but I'm looking at how to achieve it with CSS and maybe a javascript code to make things responsive. Do you have any idea on how I can achieve this design with one big image on the left and 2 small on the right? Personally, I have no idea about the code I need. Should I use div background image instead of img? Can I center image inside the div? EDIT : I got what I wanted, but it's not a really good solution. <div class="section" style="width:100%; overflow:hidden;"> <div class="colonne-gauche" style="height:100%; width:67%; float:left; "> <img src="images/DeathtoStock_Objects3.jpg" width="100%"> </div> <div class="colonne-droite" style="height:100%; width:33%; float: left;"> <img src="images/DeathtoStock_Objects4.jpg" width="100%"> <img src="images/DeathtoStock_Objects5.jpg" width="100%"> </div> </div> So I just guess the widht for each columns to match the same height, but I'm sure that if I change image size it will be broken again... So what I need is a code to make width change automatically to match the same height for the two columns.

So I thought about choosing a fixed height for div and align image inside, but how can I align the image to take the full width and height of the div itself? Thank you

I changed the code to that : <section> <div width="100%"> <div style=" width:60%; float:left; "><img src="images/DeathtoStock_Objects3.jpg" width="100%"> </div> <div style="width:39%; float: left;"> <img src="images/DeathtoStock_Objects4.jpg" width="100%"> <img src="images/DeathtoStock_Objects5.jpg" width="100%"> </div> </div> </section> I have that now : How can I make the height 50% of the big photo?

Hi, do you know a good way to do a kind of masonry layout with 2 columns and responsive image height? I would like to do something like this : So I guess that I can use float left for the first row and float right for the second row, etc. But I don't know how to make responsive height for the small images. Each small images need to be 50% height of the big one, but I don't really know how to achieve that. I looked a lot to find kind of masonry javascript, but the demos aren't giving me a lot of informations. Me it's not really masonry with responsive widht and height to match the screen, but it's kind of fixed, but responsive at the same time. For now I tried with : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <!-- TRES IMPORTANT --> <title>Photos</title> <link rel="stylesheet" type="text/css" href="styles/styles.css"> </head> <body> <section> <div width="100%"> <img src="images/DeathtoStock_Objects3.jpg" width="60%" float="left"> <img src="images/DeathtoStock_Objects4.jpg" width="40%" float="left"> <img src="images/DeathtoStock_Objects5.jpg" width="40%" float="left"> </div> </section> </body> </html> But it gave me something like that : Thank you to help me fixe my problem.

By height I mean that the two photos on the right fit the height of the big photo on the left. Also, I don't want height to be weird and want it very fluid. Just look at this website https://xinjin.exposure.co/antarctica The co-creator said me that it was 99% CSS, but it seem that image resize is javascript, but no way to find how he did that.

Hi, I think it's possible to do something like that with float left or right to have a kind of masonry with CSS http://image.noelshack.com/fichiers/2016/07/1455724726-capture-d-ecran-2016-02-17-a-10-54-01.png http://image.noelshack.com/fichiers/2016/07/1455724726-capture-d-ecran-2016-02-17-a-10-54-12.png But I'm thinking about how can I have the correct height for each photos and how can it be responsive? Thank you

I will look into that... Just need to find the code. I will try to get my sections and images working correctly and if I don't find the code, I will write back.

Hi, How can I do a simple parallax scrolling effect? I search all day for some tutorial, but it's not exactly what I want. If someone is a pro to make parallax, thank you to help me That's what I'm trying to achieve. Or if nobody know parallax, can you say me how to make a grid like that with CSS?

But everything will be centered on the page... EDIT : I found a way... I put the button text in a span and the span inside a div. The only thing is that I need to write a width for the div and I can do a margin 0 auto and it will be centered.

Hi, I changed how it look. I had too much problem with that. Look the new code. Can you help me to center the button?

Hi, I'm trying to get some titles to stick to the sides of a div containing text. I would like to make a kind of square around the text, but now I use position absolute and % and when resizing the screen, it doesn't look like expected. Do you have some advices? http://codepen.io/anon/pen/YwdqNY Thank you

Hi, How can I make a video autoplay when in sight and stop when off screen? I know that it's not very useful to use that, but for example, if I want to put an animated background on my homepage and when I scroll down to other section the video stop. Thx

Hi, I would like to know what's the best position for desktop and mobile navigation. Desktop : Left menu with logo on the right Right menu with logo on the left Centered menu Left menu without logo Right menu without logo Mobile : Left hamburger (with or without logo?) Right hamburger (with or without logo?) Centered menu on top What is the best user experience? Thank you

Ok thank you. I will keep my website simple lol. Clean and simple without a lot of Javascript.