Image glow on hover - Photoshop

trutechrep
August 11, 2015
256 views
2 votes
3 Answers

This css language is all to new to me , i just have a few questions if i may .
id like the image to glow around it , or go from a lighter opacity to its original color like so –> (output.jsbin.com/vahaseduka) // codepen.io/anon/pen/ilqnb (THE CAMERA IMAGE IS AN ACTUAL IMAGE I WILL BE USING)

I used someone’s sample code to achieve this effect.

I am satisfied with the image besides two qualities. *Upon hover a boxed border will come up like so —> i59.tinypic.com/2dmayyv.jpg …. i don’t like that frame (box) upon hover , HOW MAY I REMOVE THIS ?

Also as we see I cannot re-size the photo to size as id like without the scroll bars ? I am using wix.com to build the site, it is a compatibility issue with the site ? Or, should I downsize the image in Photoshop?

the code for this project is :

    #ex5 {
      width: 700px;
      margin: 0 auto;
      min-height: 300px;
      background: transbox;
    }
    #ex5 img {
      margin: 0px;
      opacity: 0.8;
      border: 0px transbox #eee;
      /*Transition*/
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      /*Reflection*/
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.1)));
    }
    #ex5 img:hover {
      opacity: 1;
      /*Reflection*/
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.4)));
      /*Glow*/
      -webkit-box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
      -moz-box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
      box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <style>
  </style>
</head>

<body>
  <div id="ex5">
    <img src="http://i57.tinypic.com/2poqqsn.png">

  </div>
</body>

</html>

Answers

- Enrico
- August 11, 2015 at 5:33 am
- 0 votes
0
The scrollbars appear because the border is effectively changing the box sizing. I recommend you reading about the box model.

As for your particular problem, try adding box-sizing: border-box; to your image #ex5 img, it may help you avoid those scrollbars, which appear because you are setting the width/height from your CSS. Other hacky/ugly way to avoid them is setting overflow: hidden; which may crop your image near the borders and give undesireable results.

Login or Signup to reply.

- user4257136
- August 11, 2015 at 5:36 am
- 0 votes
0
Clear This style
```
border: 0px transbox #eee;
```
and assign height attribute to image tag (#ex5 img in your case)some what like
```
height:150px;  //your figure
```
if problem again please inform

This link will help you to be a good web designer http://www.w3schools.com/
Login or Signup to reply.

Just create this styles to your web page like

<style>
   @keyframes bounce {
0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    }
}

img:hover {   //you may replace button with any tag
    animation: bounce 1s;
}

</style>

<div id="ex5">
    <img id="img1" class="anim" src="http://i57.tinypic.com/2poqqsn.png">
    <img id="img2" class="anim" src="http://i57.tinypic.com/2poqqsn.png">
    <br>
    <img id="img3" src="http://i57.tinypic.com/2poqqsn.png">
    <img id="img4" src="http://i57.tinypic.com/2poqqsn.png">

</div>

<html>

I just replace the style

button:hover{..} <--with -->
img:hower{..}

But remember dude,img,button,div are tags.

suppose, think that you have so many img tags in your page.

So that the hover effect will affect entire img on the web page.

i recommend you to create a style defined by class or id.

 /*Eg:-
  for class, use a dot sign before the class name which you want to give  style*/

.anim:hover {  
   animation: bounce 1s;
}

/*for ID, use # sign before the name of ID any name of your ID defined on your html page(i define 4 id, img1,img2,img3,img4) */


   #img3:hover {  /*It animates only img named #img3 */
   animation: bounce 1s;
}

/*for tag, use nothing ,only name of tag that you want to apply style*/

.anim:hover {  
   animation: bounce 1s;
}

Image glow on hover – Photoshop

Answers