DIY Transparent Hover Effect Over Images

We live in a world full of aesthetics, so why not work towards making your webpage more aesthetically pleasing, keep reading to learn how to make your images on your webpage have a transparent hover effect.

First let’s put an image on your webpage using the tag. Remember that the tag is empty so it does not need a closing tag

So your code for your image should look like this:

Screen Shot 2017-02-10 at 12.35.05 AM.png

If your image is a url, it should be inserted as

and do not forget to add the height and width as listed above.

Once you’ve finished that your website should look something similar to this…Screen Shot 2017-02-10 at 12.35.26 AM.png

Now that is done, it’s time to add the transparent hover effect. Go back into your coding nests to add this CSS effect

In order to do this we need to alter the opacity of the image, the opacity of the image seen above is at 1. Let’s cut it in half and change the opacity to .5. For a stronger effect go lower the opacity of an image can be altered from 1.0-0.0

Opacity is changed in the under

insert img {

                                                 opacity: 0.5;

                                                   filter: alpha opacity=50; /* For IE8 and earlier */

                                                 }

Your coding should look like this

Screen Shot 2017-02-10 at 1.09.50 AM.png

And your webpage should look like this

Screen Shot 2017-02-10 at 12.58.41 AM.png

Now thats done its time to move on to the final step, the Hover effect.

In img you are going to remain in the <head> under <style> and insert another img{ under the first one 

               img:hover {

                                                 opacity: 1.0;

                                                   filter: alpha opacity=100; /* For IE8 and earlier */

                                                 }

Your coding should look like this

Screen Shot 2017-02-10 at 1.10.48 AM.png

And we’re done! Your webpage should look like this. A realtime video would be perfect to show you the end result in motion. But I have not gotten that far yet. So, try it out yourself!

Screen Shot 2017-02-10 at 1.12.56 AM.pngScreen Shot 2017-02-10 at 1.13.04 AM.png

Advertisements

~ by jazirac on February 10, 2017.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: