-->

Sunday, August 11, 2013

To make images glow/highlight when you scroll over them:


If you look at my profile you'll see that some of my images light up when you scroll over them.
You'll need to put this css code in your customize section:
(Highlighted in red is what you would need to change depending on what color you want. You can find the different codes by going here)

 .highlight {
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border:4px solid rgba(0,0,0, 0.0);
}

.highlight:hover {
    box-shadow: 0 0 10px rgba(255,0,255,1.0);
    -webkit-box-shadow: 0 0 10px rgba(255,0,255,1.0);
    -moz-box-shadow: 0 0 10px rgba(255,0,255,1.0);
    border:4px solid rgba(255,0,255,1.0);
}


Then you want to this to your html image that you want highlighted

< img src="mypicture.jpg" class="highlight"/>
substitute the mypicture.jpg for your images url. The part you want to add is the class="highlight".

No comments:

Post a Comment