Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS change content on hover
    primarykey
    data
    text
    <p>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 :</p> <p><img src="https://i.stack.imgur.com/LOxx3.jpg" alt="enter image description here"></p> <p>I tried :</p> <pre><code>.pic2 { z-index:100; position:absolute; left:64%; bottom:44%; } .pic2:hover{ background-image:url("slicingimages/media/icon_highlight.png"); } </code></pre> <p>my content :</p> <pre><code> &lt;div id="content"&gt; &lt;p2&gt; &lt;content class="contentUpper"&gt;&lt;img src="SlicingImage/Images/alacards_coupons_illustration.png"&gt; &lt;/img&gt;&lt;/content&gt; &lt;content class="text" id="user2"&gt;ONE PLACE TO GET REWARDS&lt;/content&gt; &lt;div&gt;&lt;img class="pic2" src="SlicingImage/Media/gift_icon.png" height="8%" width="4%"&gt;&lt;img&gt;&lt;/div&gt; &lt;div&gt;&lt;img class="pic4" src="SlicingImage/Media/browser_icon.png" height="8%" width="4%"&gt;&lt;/img&gt;&lt;/div&gt; &lt;div&gt;&lt;img class="pic5" src="SlicingImage/Media/twitter_icon.png" height="8%" width="4%"&gt;&lt;/img&gt;&lt;/div&gt; &lt;div&gt;&lt;img class="pic6" src="SlicingImage/Media/facebook_icon.png" height="8%" width="4%"&gt;&lt;/img&gt;&lt;/div&gt; &lt;content class="text" id="user4"&gt;FROM YOUR LOYAL BRANDS&lt;/content&gt; &lt;div&gt;&lt;a href="#" id="user" class="showLink" onclick="showHide('example10');return false;"&gt; &lt;img class="back" src="SlicingImage/prev_button.png"&gt;&lt;/a&gt;&lt;/img&gt;&lt;/div&gt; &lt;div&gt;&lt;a href="#" id="user" class="showLink" onclick="showHide('example12');return false;"&gt; &lt;img class="next" src="SlicingImage/next_button.png"&gt;&lt;/img&gt;&lt;/a&gt;&lt;/div&gt; &lt;content class="text" id="homeNext"&gt; With all your loyality card, reward points, coupons &amp; discount vouchers &lt;/div&gt; &lt;/p2&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload