I'm trying to display div.overlay on hover of embedded div.box
div.overlay {padding:5px; background:#F00; width:100px; visibility: hidden;}
div.box {display:block; background:#FF0; width:100px; visibility:visible;}
div.box:hover div.overlay { visibility: visible;}
<div class="overlay">
<div class="box">Info about a game</div>
Play
</div>
Thanks for any hint
I suggest you change the markup slightly if possible. It will make it possible to do what you want.
Option 1:
HTML
<div class="box">Info about a game</div>
<div class="overlay">Play</div>
CSS
div.box,
div.overlay {
width: 100px;
background: #FF0; }
div.overlay { display: none; }
div.box:hover + div.overlay { display: block; }
See fiddle: http://jsfiddle.net/3uM49/
Option 2
HTML
<div class="box">
Info about a game
<div class="overlay">Play</div>
</div>
CSS
div.box {
width: 100px;
background: #FF0; }
div.overlay { display: none; }
div.box:hover div.overlay { display: block; }
See fiddle: http://jsfiddle.net/kgXDT/
You could hover on the parent element and that seems to make it work e.g:
div.overlay:hover {
visibility: visible;
}
Fiddle: http://jsfiddle.net/52sM5/
copy and replace your css with my css
div.overlay {padding:5px; background:#F00; width:100px; visibility: hidden;}
div.box {display:block; background:#FF0; width:100px; visibility:visible;}
div.overlay:hover { visibility: visible;}
Related
How do I get the child div which is inside the parent div, go on the first line of the div?
See the picture for what I mean:
div
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
.parentDiv
{
position: relative;
/*...*/
}
.childDiv
{
position: absolute;
/*...*/
}
Basicly that's the CSS. Read more
like this?
#parent {
background-color: #aaaaaa;
height:300px;
}
#child {
background-color: #ff0000;
width:220px;
margin-left:10px;
}
#two {
background-color: #00ff00;
width:100px;
}
.kids {
display: inline-block;
padding: 2px;
white-space: normal;
}
<div id="parent" style="width: 250px; display: inline-block; white-space: nowrap">
<div id="child" class="kids">
<span>child</span>
</div>
</div>
IF you want to look like in your img just do this :
.parent {
height:300px;
width:300px;
background-color:orange;
}
.child {
height:50px;
width:80%;
background-color:green;
margin:0 auto;
}
<div class="parent">
<div class="child">
</div>
</div>
i am VERY curious to see why the downvote ? anyone ?
I would like, same as when you hover a GIF shot on Dribbble, display a div with infos when the cursor is after/at 50% from top of the item height.
Tested example
I made this, this is working but a bit tricky… especially when you mouseout.
— http://codepen.io/anon/pen/meZbJK
Used CSS code
.item {
position:relative; width:960px;
&--infos {
opacity:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:0 10%;
text-align:center;
background:transparentize(#a7ecf8, 0.075);
transition:opacity 200ms ease-in-out;
}
p {
position:relative;
padding:0;
top:50%; transform:translateY(-50%);
}
strong {
display:inline-block;
margin-bottom:10px;
}
time {
color:#959595;
font-size:14px;
}
&--infos-target {
position:absolute;
bottom:0;
float:left;
width:100%;
height:50%;
}
&--infos-target:hover &--infos {
opacity:1;
top:-100%;
height:200%;
}
}
I made edits to your codepen to make it work.
Essentially, I took --infos out of --infos-target and used the ~ selector to grab it on hover. With that, I didn't have to do the top: -100%; height: 200% hack anymore.
Combine that with pointer-events: none on --infos and you're good to go.
Using z-index you can position the target above the info section and you're good to go.
The biggest issue here is that you cannot have links inside the info section because of pointer-events: none
http://codepen.io/anon/pen/XmLrgp
HTML
<div class="item">
<img src="http://lorempicsum.com/futurama/960/250/1" alt="">
<div class="item--infos-target">
</div>
<div class="item--infos">
<p>
<strong>Item title</strong>
<br>
<time datetime="2015-11-05 15:23:26" class="date">Added two weeks ago</time>
</p>
</div>
</div>
SCSS
.item {
position:relative; width: 960px;
&--infos {
opacity:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:0 10%;
text-align:center;
pointer-events: none;
background:transparentize(#a7ecf8, 0.075);
transition:opacity 200ms ease-in-out;
z-index: 9;
}
p {
position:relative;
padding:0;
top:50%; transform:translateY(-50%);
}
strong {
display:inline-block;
margin-bottom:10px;
}
time {
color:#959595;
font-size:14px;
}
&--infos-target {
position:absolute;
bottom:0;
float:left;
width:100%;
height:50%;
z-index: 10;
}
&--infos-target:hover ~ &--infos {
opacity:1;
}
}
I think we need a bit of trickery here.
Firstly we need to "hide" the top 50% of the div/image from acting as a hover point/trigger.
We can use an absolutely positioned pseudo-element for that.
This means we can use the image (rather than the div) as our hover trigger...but this causes issues as the overlay would stop the hover effect. We can disable that with pointer-events:none.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.parent {
display: inline-block;
margin: 25px;
position: relative;
overflow: hidden;
}
.parent img {
display: block;
}
.info {
position: absolute;
top:100%;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,0,0,.5);
color:white;
line-height: 72px;
transition:top .25s ease;
pointer-events:none;
z-index:3;
}
.parent::before {
content: '';
position: absolute;
top:0;
left: 0;
height: 50%;
width: 100%;
background: rgba(0,0,0,.5); /* for demo visual reference */
z-index:2;
}
.parent img:hover ~ .info {
top:0;
}
<div class="parent">
<img src="http://lorempixel.com/g/200/200" alt="" />
<div class="info"><h3>Some Text</h3></div>
</div>
I'm a big novice in CSS, and I need to fill the remaining space of a div or h1 tag with a pattern (it can be an image or generated with CSS).
This is the effect I need to create: http://es.tinypic.com/r/20gi92/8
Thanks for your help!
I would use it like this: http://jsfiddle.net/maximgladkov/3rNY3/
HTML
<div class="title">
<h1>Test title</h1>
</div>
CSS
.title {
background: url(http://ru.vectorboom.com/Tutorials/FloralPattern/final.png);
}
.title h1 {
background: #fff;
display: inline;
padding: 0 10px 0 0;
}
I assume you mean remaining as in, you already have an img or another element as the main part of the div. So i'd guess adding a background to the div is what you are after.
Example HTML:
<div class="color">
<h1>Some Text</h1>
</div>
<div class="img">
<h1>Some Text</h1>
</div>
CSS for adding color it would be:
.color {
background: yellow;
}
Or an image:
.img {
background: url('http://www.lorempixel.com/200/50');
}
DEMO
I would use a span inside the h1 and a pseudo element.
Codepen Demo(s)
HTML
<div class="wrapper"> /* not required */
<h1 class="left"><span>Some Text</span></h1>
<h1 class="right"><span>Some Much Longer Text</span></h1>
</div>
CSS
h1 {
overflow:hidden; /* hides all extra pixels */
font-size:2em;
}
.right {
text-align:right;
}
h1 > span {
diaplay:inline-block;
background:Navajowhite;
position:relative;
}
h1.left > span:after {
content: "";
position: absolute;
left:100%;
top: 0;
height: 2em; /* same as h1 or same line-height*/
width:2000px; /* some really large number*/
background:red;
margin-left:0.5em; /* or remove and add padding-right to span */
}
h1.right > span:before {
content: "";
position: absolute;
right:100%;
top: 0;
height: 2em; /* same as h1 or same line-height*/
width:2000px; /* some really large number*/
background:red;
margin-right:0.5em; /* or remove and add padding-right to span */
}
Why does my parents div "dad" not take the height of its children?
http://jsfiddle.net/MeHyJ/
<div id="dad">
<div class="float">1</div>
<div class="float">2</div>
<div class="float">3</div>
<div class="float">4</div>
</div>
#dad {
height:100%;
width:100px;
border:1px solid black;
}
.float {
width:50px;
height:50px;
background-color:red;
float:left;
}
Use display:inline-block rather than using
float:left; clear:both;.
Task : Figure out the difference between display: block/inline/inline-block;
DEMO & CODE
It is a well-known issue of floated elements.
You need so-called clearfix method: http://css-tricks.com/snippets/css/clear-fix/
#dad:after {
content: "";
display: table;
clear: both;
}
or make a class that you can reuse later in your code:
.clrfx:after {
content: "";
display: table;
clear: both;
}
Your updated DEMO
Please change the css of id #dad as below:
#dad {
float:left;
height:100%;
width:100px;
border:1px solid black;
}
The result on chrome and ie10 are work, but not work on firefox.
I would like to add the shadow background at the bottom of div
please take a look on this
http://jsfiddle.net/yokosatan/mv83a/
Here is the code of HTML
<div class="box">
<div class="logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMLZg7HAU1G8n8ZKnOeai4EsUUtwyyWamco2hPHLjFx2Hl2X3mwQ" border="0"/>
</div>
<div class="name">Name</div>
</div>
And CSS code
.box
{
text-align:center;
width:105px;
}
.name
{
font-size:11pt;
margin-top:8px;
text-transform:uppercase;
}
.logo
{
width:105px;
height:105px;
background:white;
display: table-cell;
vertical-align: middle;
position:relative;
}
.logo:after
{
content:url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
position:absolute;
bottom:-15px;
display:block;
height:15px;
}
.logo img
{
margin:0 auto;
max-width:85%;
width:85%;
max-height:85%;
}
Question is how to do the same result as chrome or ie that display.
Additional, it could be other solution that give the same result for all web browsers.
Thank you
Update: I think the cause is that I make display
display:table-cell;
I change to be display block and it's work, but I want to make logo to be center vertically.
What should I do?
Instead of using content: url(); use content: ' '; and use background-image and it should work for you
Demo
.logo:after {
content:' ';
height: 15px;
width: 100px;
background-image: url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
position:absolute;
top: 110px;
display:block;
background-repeat: no-repeat;
}
Edit:
As you had issue using display: table-cell;, you can use display: block; instead and use position: absolute; for the img tag and use top and left with custom values to set the image vertically middle.
Demo
use content as ""
and add background
.logo:after
{
background:url("http://s24.postimg.org/f1dompt4x/shadow_test.png") repeat-x scroll center bottom transparent;
content:"";
position:absolute;
bottom:-15px;
display:block;
height:15px;
width:110px;
}