Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can actually do this entirely with css, this is a snipet from a website of mine, im entirly too lazy to edit it, but you get the idea: </p> <pre><code>&lt;ul class="hover"&gt; &lt;li style="margin-top:40px;""&gt; &lt;a href=""&gt;&lt;img src="images/Home/Home.jpg" alt="home" style="width:130px; height:100px;"/&gt; &lt;img src="images/Home/Home.jpg" alt="home" class="preview" style="width:180px; height:150px;"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li style="margin-left:55px; margin-top:-20px;"&gt; &lt;a href=""&gt;&lt;img src="images/About/About.jpg" alt="About The Author" style="width:200px; height:200px;"/&gt; &lt;img src="images/About/About.jpg" alt="About The Author" class="preview" style="width:250px; height:250px;"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>css:</p> <pre><code>/* begin hover */ .hover{ cursor: default; list-style: none; } .hover a .preview{ display: none; } .hover a:hover .preview{ display: block; position: absolute; top: -33px; left: -45px; z-index: 1; } .hover img{ background: white; border-color: black; border-style: solid; border-width: 4px; color: inherit; padding: 2px; vertical-align: top; -moz-border-radius: 15px; border-radius: 15px; } .hover li{ background: black; border-color: black; border-style: solid; border-width: 1px; color: inherit; display: block; float: left; margin: 3px; padding: 5px; position: relative; } .hover .preview{ border-color:black; border-width:8px; border-stle:solid; } li{ -moz-border-radius: 15px; border-radius: 15px; } </code></pre> <p>there are some not needed styles in there but again, you get the idea. basically youre just showing one image on top of the original, on hover</p>
    singulars
    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.
    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