I have box with nested image and div with text information. I'm doing simple CSS trick with positioning and display parameter changes on hover, so text box is only seen if hover on main box.
Here's my problem, text box has background with opacity, how can I match height of the box with background to its parent when it's show on hover.
Here's live example: http://jsfiddle.net/Mamaduka/jDYu5/16/
If I understand correctly, all you need to do is give texts a height of 100%
.box:hover .texts {
display: block;
height:100%;
}
Worked for me when I edited your fiddle.
Related
I have some CSS challenge here. To describe what I am after is challenge as well :) so hope it makes sense.
I need text title that will align in the middle of DIV container.
The title needs to have a background image that will apply to its left side and different background image that will apply to its right side.
The background behind the TITLE text must be transparent.
~~~~bg image1~~~~ TITLE ~~~~bg image2~~~~
The width of DIV container varies as well as the TITLE text length.
I've tried to apply content with :before and :after markup
h1 {margin: 0 auto;display: table;}
h1:before {content: url('image_left.png');}
h1:after {content: url('image_right.png');}
however this does not work for me as the width of :before and :after element equals to the width of content image and I can not figure out how to make it responsive.
Any hints appreciated :)
I would like to make the text content of my div invisible but still display the background image. Is that possible?
In the app, the div's single-character content determines which class is conditionally applied to the div, but the content itself is not what needs to be displayed. I want to display the image associated with the class.
Add color:transparent; to the div CSS. It would make the div have text but text color is transparent with respect to the background.
CSS (with sample image):
#test{
background-image: url('http://static.adzerk.net/Advertisers/12f0cc69cd9742faa9c8ee0f7b0d210e.jpg');
height: 300px;
color: transparent;
}
Demo Fiddle.
I have an image set as a background like so
.about {
height: 351px;
background-image:url("../images/about.png");
background-position:center;
background-repeat:no-repeat;
}
And I'm trying to user :hover
.about:hover {
background-image:url("../images/hover.png");
}
to display another image over the top. I want the original picture to still be there as the hover image has transparency.
This way replaces the image, is there a way to not replace it but just hover over the original image?
You need a mask, or an element inside your .about element (or positioned absolutely over it). The mask has the hover image as its background, but has visibility:hidden. Then, when the .about element is in hover state, it activates the mask. .about:hover .about-mask {visibility: visible;}. Pro tip: using visibility:hidden instead of display:none allows the browser to load the image, even though its not visible, so you wont have any flickering.
http://jsfiddle.net/nDHbD/
You could place a div above the .about one, then have it display it's image on :hover, that way, both images would show. Even better, you could animate a transition on your new div so it goes smoothly.
http://74.52.155.226/~projtest/team/harmeet/smoke51/products.html
That is the design that i am currently working on. If you inspect element on the banner below the navigation you can see that the 10px solid white border is taking some gap below the image. I am puzzled as to where is that coming from as logically the border should surround the image only no matter what the height of image is.
you can put display: block; on your <img>
That is because your image in the div.innerbanner is inline (images are inline be default). The space you seen is the descender height.
You need to create a block element of the image to prevent any descender height to show. Try adding this to your CSS:
div.innerbanner img { display: block; }
I want to set a background image in a div class, and want to add some text on the image, with 5px padding but my text is overflowing, please see my css and demo here http://jsfiddle.net/LcQzG/ and help me with it. Thanks.
You should set a width and add
word-wrap:break-word;
example : http://jsfiddle.net/LcQzG/6/
Either make the background image higher, make the text smaller, make the box wider or add this to add a scroll bar:
overflow: auto;
or to hide the overflowing text:
overflow: hidden;
You need to set a width on the containing div. The width would be the width of the image - 10px (the sum of the left and right padding).