1

I had to position images in a circle around another image. I have managed to do this only using html and css which is good because I need to display those images in a joomla article. What I now want to do is add speech-bubble like boxes that describe the images when the user hovers over it. It should not be positioned in a fixed position on the page, but next to the image. I have tried a lot of things, but I am only a beginner in css and I don't really know how the rotation translation and rotation back affects the positioning of objects like boxes/tooltips/speech-bubbles... Here my code of the images positioned in a circle:

<html>
<head>
<style>
.circle-container {
 position: relative;
 width: 600px;
 height: 600px;
    margin: auto;
}
.circle-container img { 
 display: block;
 position: absolute;
 top: 50%; left: 50%;
 width:100px;
}
.deg0 { transform: translate(200px); } /* 200px = half the width of the wrapper */
.deg36 { transform: rotate(36deg) translate(200px) rotate(-36deg); }
.deg72{ transform: rotate(72deg) translate(200px) rotate(-72deg); }
.deg108 { transform: rotate(108deg) translate(200px) rotate(-108deg); }
.deg144 { transform: rotate(144deg) translate(200px) rotate(-144deg); }
.deg180 { transform: translate(-200px); }
.deg225 { transform: rotate(225deg) translate(200px) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(200px) rotate(-315deg); }
.deg01 { transform: rotate(90deg) translate(-200px) rotate(-90deg);}
</style>
</head>
<body>
<div class='circle-container'>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='center'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg0'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg36'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg72'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg108'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg144'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg180'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg225'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg315'></a>
<a href="#"><img src ='http://aikido-switzerland.org/wp-content/uploads/768px-Telefunken_FuBK_test_pattern.svg_.png' class='deg01'></a>
</div>
</body>
</html>

and the speech-bubble could look like this: http://txs.io/rbtb thank you for any replys

peerfunk
  • 29
  • 1
  • This is a duplicate of http://stackoverflow.com/questions/8866736/css-speech-bubble-with-box-shadow. Hope that helps you out – Simpson Oct 31 '14 at 17:24
  • no it is not a duplicate I am sorry that you didnt understand anyways I solved the problem by using php – peerfunk Nov 01 '14 at 18:14
  • Hi! Since some time, Joomla has its own StackExchange site: [joomla.stackexchange.com](http://joomla.stackexchange.com). You might get answers there. Please consider moving your question there (delete it from [SO] and paste question text at joomla.stackexchange.com). – miroxlav Jan 20 '15 at 23:48

0 Answers0