Monday, August 17, 2015

Image hover effects & Customize css for different devices

I. Simple but effective and look good:

[1] http://designshack.net/articles/css/joshuajohnson-2/
[2] http://designshack.net/tutorialexamples/imagehovers/index.html


II. Customize css for different devices. Example:

/* >= 768. Desktop. */
@media only screen and (min-width:768px){
    #slide_img1, #slide_img2, #slide_img3
    {
        display: block; max-width: 100%; height:auto;
    }
}

/* < 768px. Mobile. */
@media only screen and (max-width:768px){
    #slide_img1, #slide_img2, #slide_img3
    {
        display: block; max-width: 800px; height: auto;
    }
}


[3] http://stackoverflow.com/questions/22839792/bootstrap-3-custom-css-class-depending-of-devices

No comments:

Blog Archive

Followers