I have some icons in my content and I want if I hover over one of icon, will so something like round images around the icon, or the icon will become bigger :

![enter image description here](https://i.stack.imgur.com/LOxx3.jpg)

I tried :

```
.pic2
{
    z-index:100;
    position:absolute;
    left:64%;
    bottom:44%;
}

.pic2:hover{
background-image:url("slicingimages/media/icon_highlight.png");
}

```

my content :

```
   <div id="content">
        <p2>
            <content class="contentUpper"><img src="SlicingImage/Images/alacards_coupons_illustration.png"> </img></content>
            <content class="text" id="user2">ONE PLACE TO GET REWARDS</content>
            <div><img class="pic2" src="SlicingImage/Media/gift_icon.png" height="8%" width="4%"><img></div>
            <div><img class="pic4" src="SlicingImage/Media/browser_icon.png" height="8%" width="4%"></img></div>
            <div><img class="pic5" src="SlicingImage/Media/twitter_icon.png" height="8%" width="4%"></img></div>
            <div><img class="pic6" src="SlicingImage/Media/facebook_icon.png" height="8%" width="4%"></img></div>
            <content class="text" id="user4">FROM YOUR LOYAL BRANDS</content>
            <div><a href="#" id="user" class="showLink" onclick="showHide('example10');return false;">
            <img class="back" src="SlicingImage/prev_button.png"></a></img></div>
            <div><a href="#" id="user" class="showLink" onclick="showHide('example12');return false;">
            <img class="next" src="SlicingImage/next_button.png"></img></a></div>
            <content class="text" id="homeNext"> With all your loyality card, reward points, coupons & discount vouchers </div>
        </p2>    
   </div>

```