help with styling problems hover efects

[marcus123]

I have been working on this for the last few hours and i cant figure out where to start, can anybody help me.

<div class="entry-content">
  <ul class="categorylist" id="instance">
    <li><span class="titleclass"><a href="#" title="Title">title</a></span> <a href="#" title="title"><img width="220" height="135" src="image.jpg" class="alignleft" alt="alt" /></a><span class="excerptclass">text here</span></li>
  
    <li><span class="titleclass"><a href="#" title="Title">title</a></span> <a href="#" title="title"><img width="220" height="135" src="image.jpg" class="alignleft" alt="alt" /></a><span class="excerptclass">text here</span></li>
  </ul>
</div>

I am trying to get the code to show the images within a grid of 4 – 6 wide responsive and when hovered image dims and shows title and excerpt.

Is this possible.
Thanks for your advice in advance.

[__]

Please,

Use a live demo tool like CodePen to demonstrate problems.

[nixnerd]

Si Senor. Codepen please! Just use the :hover pseudo selector and throw a transition on it. Make sure to prefix! Or don’t. It’s up to you.

[Author]

Posts