Question

So i have my image on my webpage. In my css code, i have a transition for a :hover (glow appears), which works fine, and i want to add a stroke on :active. Here’s my code :

#bb
{
    top: 55%;
    left: 6%;
    opacity: 0.85;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#bb:hover
{  
    opacity: 1;
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
    box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
}
#bb:active
{
    opacity: 1;
    border: 10px solid rgba(87,87,87,0.8);
}

my problems are the following : how do i get the stroke to appear around the image without moving it, and how do i get it to stay “active” without having to hold the click on the image?

Answer 1

You can use CSS box-sizing:border-box;. Write like this:

#bb:active
{
    opacity: 1;
    border: 10px solid rgba(87,87,87,0.8);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Check this http://jsfiddle.net/4g6d9/