Jump to content

Nic727

Members
 View Profile  See their activity

  • Posts

    269

  • Joined

  • Last visited

 Content Type 

Posts posted by Nic727

    CSS transition

    in CSS

    Posted

    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

    masonry layout

    in JavaScript

    Posted

    Geeez? Ok go for that then, good luck!

    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 :

     

    1457373223-capture-d-ecran-2016-03-07-a-

    masonry layout

    in JavaScript

    Posted · Edited by Nic727

    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.

    masonry layout

    in JavaScript

    Posted

    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.

    masonry layout

    in JavaScript

    Posted

    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...

    masonry layout

    in JavaScript

    Posted · Edited by Nic727

    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.

    masonry layout

    in JavaScript

    Posted · Edited by Nic727

    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.

    masonry layout

    in JavaScript

    Posted

    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 :

    1456323682-capture-d-ecran-2016-02-24-a-

     

    How can I make the height 50% of the big photo?

    masonry layout

    in JavaScript

    Posted

    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 :

    1456320991-concept-galerie.jpg

    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 :

    1456320999-capture-d-ecran-2016-02-24-a-

     

    Thank you to help me fixe my problem.

    Masonry with CSS

    in CSS

    Posted · Edited by Nic727

    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.

    Simple parallax scrolling

    in JavaScript

    Posted · Edited by Nic727

    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.

     

    1455251409-para.png

     

    Or if nobody know parallax, can you say me how to make a grid like that with CSS?

    make text stick to div sides

    in CSS

    Posted · Edited by Nic727

    Add text-align:center to the body style.

    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.

    autoplay video when in sight

    in JavaScript

    Posted

    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

    Where do you put your navigation?

    in General

    Posted

    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

×
×
  • Create New...