1

I'm trying to create a row of clickable buttons that enlarge on hover using a Content Editor Web Part. Here is the code:

<style type="text/css">

.thumbnail {
position:relative;
width:100px;
height:80px;
display:block;
}

.thumbnail:hover {
width:200px;
height:160px;
z-index: 999;
}

</style>​​​​​​​​​​​​​​​​ 

<a href="URL"><img src="IMG" class="thumbnail" alt="" style="margin: 5px;"/> </a>

<a href="URL"><img src="IMG" class="thumbnail" alt="" style="margin: 5px;"/> </a>

<a href="URL"><img src="IMG" class="thumbnail" alt="" style="margin: 5px;"/>​​ </a>

<a href="URL"><img src="IMG" class="thumbnail" alt="" style="margin: 5px;"/></a>​​

It's working pretty good, but the CEWP keeps displaying the clickable images in a column; I would like instead to have it in a row. How can I do that?

Also, be aware that I prefer to do NOT modify the master page. Thanks!

0

Try this in your CSS

a img{
  float:left;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.