For showing transform i used jsfiddle, How to keep the sticky text to the image when transform, right now the text is constant,How to transform the text also along with the image
http://jsfiddle.net/U9g3c/2/
See this fiddle, here I inserted the rotation and position change (the javascript-lines with div.namehover.
http://jsfiddle.net/5r6mx/
It would be more elegant if you would put the image and its title in a <div> and do all the rotation and reposition stuff on this <div>.
You are only rotating the images. You have to set a rotate-class to the text wrapper as well.
place your text and image in a shared div container and rotate that.
Related
In the normal prestashop theme, there is a box at the top of the category pages for a description of the category as a whole. The box has an outline and contains a picture and some text.
The text is normally below the image, so the block takes up a lot of room. I would like to float the image to the left, and wrap the text around it, so it's smaller.
I suspected this would be easy, because the image and text are in divs, and both of them are in another div for the outline. So I simply added float:left to the image's DIV.
The image moved to the right OK, and the text flowed too. However, the surrounding DIV did not resize properly, so the image now runs right out of the box.
How do I get the enclosing DIV to resize properly?
You need to force the containing div to wrap the floated contents. You can do this a few ways, one being to add overflow:hidden.
.content_scene_cat {overflow:hidden;}
I want to have three circular divs next to each other (that's not a problem). At the bottom of the circle it will show the first words of my information text. On hover the information text will go up so you can read the whole text:
What I tried to do at first was to create a div width: 170px and height: 170px, set a circle as a background in my CSS and do class:hover to bring up the text.
What I realised while attempting this was that I can't hide some of the text "behind" the circle like in the Normal picture I posted above.
Whats the best way to do this?
Make an img that floats on top of the text (using CSS absolute positioning) that has the inner part of the circle transparent. See here for more information.
For clarification: I'm not asking how to darken an image when you hover over it. I'm wondering how to make other images surrounding the image your cursor is over darken.
Here is an example: http://www.b-reel.com/
When you hover over the big category images, the surrounding images darken, but the hovered image remains the same.
Any input would be appreciated. Thank you!
You don't make surrounding images darker. Instead, what you do is you put a div around all images, and when the cursor is over this div, all images are darker. But you also add div elements around each image, and you make an image less dark when the cursor is over it. The combination of both is what gives you the desired effect.
In the example you posted they are using JavaScript to apply a .fadeOut class on the other divs. That .fadeOut class sets the opactiy of the other divs to 50%.
I have a div, inside the div is a background image that looks like a button and I have text in the div saying "Home". By default the text is snapped to the top and does not look right. How could I move the text around in the div without moving the div?
css file:
http://pastebin.com/xrAFMVDd
html file:
http://pastebin.com/b5Fubte0
One way of doing this is to wrap your text in a <p> tag and use CSS attributes top and left with position: relative to specify the position of the text relative to the top left of the div.
See an example here: http://jsfiddle.net/zvMKH/
I fixed it by changing the line-height under #button1 li a. Worked like a charm! Thanks to everybody that contributed! I really appreciate it!
I am trying to display a cropped center area of an image and have it work for different size images.
I had success setting a fixed width for the div containing the image and using overflow:hidden property, this works the way I'd like it to except this only shows the leftmost part of the image and the right side is hidden.
What I'd like is to display the center part of the image and have the left and right sides of the image hidden.
I'd go with the approach of making it a background image
.imghider {width:100px; background-image:url(./qed.jpg); background-position:center center;background-repeat:no-repeat;}
<div class="imghider"> </div>
As for different sizes you could use several classes or CSS expressions (or server side css generation)
I hope this helps.