Databases
StackOverflow2013
Postsdbo
POHow can I display these images with CSS instead of HTML?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I display these images with CSS instead of HTML?
    text
    copied!<p>I am trying to add a some social icons to the siderbar of my blog. In my sidebar i have some topics organized in a list. At the end of this list I would like to have one list item that displays my social icons. I managed to achieve this by using the tag and got something like this:</p> <pre><code>&lt;!-- Social icons --&gt; &lt;li&gt; &lt;img src="/images/Twitter.png"&gt;&lt;a href="http://twitter.com"&gt;&lt;/a&gt;&lt;/img&gt; &lt;img src="/images/Github.png"&gt;&lt;a href="http://github.com"&gt;&lt;/a&gt;&lt;/img&gt; &lt;img src="/images/Quora.png"&gt;&lt;a href="http://quora"&gt;&lt;/a&gt;&lt;/img&gt; &lt;img src="/images/LinkedIn.png"&gt;&lt;a href="http://linkedin.com"&gt;&lt;/a&gt;&lt;/img&gt; &lt;img src="/images/Google.png"&gt;&lt;a href="http://google.com"&gt;&lt;/a&gt;&lt;/img&gt; &lt;img src="/images/Flickr.png"&gt;&lt;a href="http://flickr.com"&gt;&lt;/a&gt;&lt;/img&gt; &lt;img src="/images/Vimeo.png"&gt;&lt;a href="http://vimeo.com"&gt;&lt;/a&gt;&lt;/img&gt; &lt;img src="/images/YouTube.png"&gt;&lt;a href="http://youtube.com"&gt;&lt;/a&gt;&lt;/img&gt; &lt;/li&gt; </code></pre> <p>However, I don't like this approach because</p> <ul> <li>the links don't work for some reason</li> <li>I am not able to resize the images (they are way to big like this)</li> <li>I won't be able to have a hover effect</li> </ul> <p>As I am just beginning with CSS I don't know how to solve this problem. I tried using some div containers and ids and classes but I couldn't get it working. So this is to all of you CSS experts:</p> <p>How can I have resized images, displayed inline, with link and with hover effect using CSS and getting rid of those tags?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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