I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
Related
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
I'm new to designing web pages. I need to create a page that will have 2 sections.
The first section will have a logo on the top left corner. The second section will be in the middle of the page with some content generated by iframes.
I have put 2 div tags on the page: one for the image and another for content like this:
<div class="logo">
<a href="http://somelink.com/">
<img src=someimage.png'/></a>
</div>
<div class="content">
<iframe src="somepage.php></iframe>
</div>
How can I do it?
Than you
Try something like this:
Fiddle: http://jsfiddle.net/bjfxq/
Use CSS to position your elements. To learn more about styling, try this interactive tutorial:
http://www.codecademy.com/courses/css-coding-with-style/0/1
HTML
<div class="logo"><img src='http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'/></div>
<div id="content"><iframe src="http://www.stackoverflow.com"></iframe></div>
CSS
#content {
text-align:center;
}
There are a million other ways to do this, but your question was basic, so my answer was basic.
CSS
.logo
{
float: left;
}
.content
{
text-align: center;
}
Using CSS I am running into trouble getting a div later on the page to show up using the hover command over an img tag. I'm writing the page using Bootstrap 3 - Any idea why this may be a problem? The words in "hovershow" appear at the right spot on the page when they are not originally hiden using CSS which makes me think there's a problem with the command itself.
HTML
<div class="col-md-4 col-sm-4">
<img id="Email_Logo" class="featurette-image img-responsive" src="img/Email_Icon_Send1.jpg" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="hovershow"><p>This should show on hover</p></div>
</div>
</div>
CSS
.hovershow{
display:none;
}
#Email_Logo:hover .hovershow{
display: block;
}
That's definitely not how CSS works.
The following CSS implies there is an element .hovershow somewhere within #Email_Logo:
.#Email_Logo:hover .hovershow{
display: block;
}
And well... that's not the case. What you want can either be achieved by some easy Javascripting or a change in your HTML 'tree' and CSS.
My problem can be better understood by the image below.
I have several div elements (div A) which have a variable size that depends on their content.
They are displayed inblock inside a larger container with a max-with defined(the large outer rectangle without a name).
Everything works fine until I had inside divs A two other divs (B and C) which I what that look like the image.
I haven´t been successful. I've tried several combinations of css properties like display, margin, padding, float... negative margins... tables...
Any help would be welcome.
Update
the code looks like the example:
html
<div style="max-width: 800px;">
<div class="div_a">
<div class="div_b">
short text
</div>
<div class="div_c">
short text
</div>
</div>
<div class="div_a">
<div class="div_b">
looooong text
</div>
<div class="div_c">
looooong text
</div>
</div>
<div class="div_a">
<div class="div_b">
huuuuuge text
</div>
<div class="div_c">
huuuuuge text
</div>
</div>
</div>
css
.div_a{
display: inline;
}
.div_b{
display: block; /* doesn't work*/
}
.div_c{
display: block; /* doesn't work*/
}
If I understand correctly, this should do it:
.div_a{
display: inline-block;
}
:)
...assuming you don't have other styles, besides border and spacing properties.
A fiddle example here
i've searched around and seen some examples of how this is done, but i don't really get it and tried all methods but none worked, so i would like to ask if anyone can show me, for my code below, how can i affect the tournytitle when the img is hovered?
<div id="upevents" class="righty">
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 2 Hat</div>
<div style="color: #888888; font-size: 10px;">17 . 12 . 2011</div>
</div>
<img src="/images/tourny/jomjom2.jpg" />
</div>
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 1 Hat</div>
<div style="color: #888888; font-size: 10px;">12 . 12 . 2011</div>
</div>
<img src="/images/tourny/bane5.jpg" />
</div>
</div>
how should i write my css code for this?
i tried something like
.upevents img:hover + #tournytitle { background-color: yellow; }
but doesn't seem to work.
help much apperciated
As mentioned, your .tournytitle class must be a child of the img your trying to roll over. Your code .upevents img:hover + #tournytitle { background-color: yellow; } is certainly close, you just need to figure out how to comply to the above rule. With this your saying that .tournytitle is an adjacent-child of img, which is not the case in your given code. Also, your class and id symbols are incorrect, watch out for that.
I managed to get your code working by switching .tournytitle and img so that the class is now the adjacent-sibling - http://jsfiddle.net/gmwjw/1/ - I realize this may not be the design your looking for, but its a start.
This may be helpful to you - http://meyerweb.com/eric/articles/webrev/200007a.html
The .tourneytitle must be a child of the img element for you to achieve this. This fiddle shows the way you can reveal your image by hovering over your .tournytitle: http://jsfiddle.net/fWxH3/203/
To get what you want, you would need to change your HTML so that somehow your tournytitle div is a child of your img tag. Maybe you can use span's inside of your image tag instead of using div's for everything.