Image Floating Effect Using Mostly CSS!

This is the code for your HTML:

<img src="insert-image-location" id = "img">

Relative Post: New CSS3 Features

This is the code for your CSS:

#img {

-webkit-box-shadow: -2px 7px 40px 2px rgba(0,0,0,0.49);

-moz-box-shadow: -2px 7px 40px 2px rgba(0,0,0,0.49);

box-shadow: -2px 7px 40px 2px rgba(0,0,0,0.49);

-webkit-transition: all ease-in-out 500ms;

-moz-transition: all ease-in-out 500ms;

-o-transition:all ease-in-out 500ms;

transition: all ease-in-out 500ms;

}

#img:hover {

-webkit-box-shadow: -2px 19px 24px 0px rgba(0,0,0,0.3);

-moz-box-shadow: -2px 19px 24px 0px rgba(0,0,0,0.3);

box-shadow: -2px 19px 24px 0px rgba(0,0,0,0.3);

transform: translate(0px,-4px);

}

The Code in Depth:

The HTML part is quite easy, however, the CSS is a lot more complex. The transition effect must be included in the code in order to improve the quality of the float effect. The -moz-, -webkit-, and the occasional, -o- simply refer to the different browsers. -moz- refers to Mozilla Firefox, -webkit- for Google Chrome and Safari, and -o- is for Opera.(Occasionally, -ms- is used for Internet Explorer) The line transform: translate(0px, -4px) produces an upwards hover. Also, the two values that you choose to plug into this line affect the horizontal and vertical axis, accordingly. Now that we've covered the basics we can go deeper into the values.

The values that you plug into box-shadow are as follows (horizontal length, vertical length, blur radius, spread radius, shadow-color). In the case of the shadow-color, I use rgba which stands for Red, Green, Blue, Alpha. Alpha referring to the opacity. Just note that you must decrease the opacity of the box-shadow, increase vertical length as well as, decrease both blur radius and spread radius in the :hover in your CSS. Otherwise, the image will look like it is sinking into your web-page instead of floating away from your web-page.

Thanks for tuning in! I hope you learned something today. If you are confused or lost, feel free to contact me! Also, if you find an easier way to set this up, let me know! My email address is ajdinmasic@websolutions.today. Have a wonderful day and never stop learning and perfecting your craft!