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!

1

1 Answer 1

0

Try this in your CSS

a img{
  float:left;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.