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>
Related
This is our code. css:
.mydiv
{
position: absolute;
background-color: white;
margin-top:40px;
display: block;
left: 50%;
transform: translate(-50%, 0);
max-width:10%;
max-height:30%;
overflow: auto;
}
body
<div class="mydiv">
<img border="0" src="http://atldunia.com/youtube/FixedP7.jpg" />
</div>
This div automatically adjusts to the size of the contents. Both the scroll bars appear on demand. However, we are unable to add a button that is right aligned and appears outside the scroll making it always visible.
http://atldunia.com/youtube/FixedPosPopup7.htm
I assume you wish to add a "close" button. If so, you can wrap your content in another layer and add the button to the first.
.popup-wrapper { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:400px; max-height:400px; overflow:hidden; }
.popup-close { display:block; position:absolute; right:0; top:0; width:32px; height:32px;
background:#404040; line-height:32px; vertical-align:middle; text-align:center; font-size:24px;
color:#909090; cursor:default; }
.popup-close:hover { background:#808080; color:#c0c0c0; }
.popup-content { display:block; position:relative; width:100%; height:100%; overflow:auto; }
.popup-content > img { display:block; position:relative; width:auto; height:auto; }
<div class="popup-wrapper">
<div class="popup-content"><img src="http://atldunia.com/youtube/FixedP7.jpg"/></div>
<span class="popup-close">×</span>
</div>
You will need modify a couple things to your liking, but you get the idea.
This question already has answers here:
Transparent half circle cut out of a div
(8 answers)
Closed 8 years ago.
Can I make a rectagle div with a half cut out circle using CSS? The half circle should be transparent and let the background show through.
desired CSS shape :
HTML :
<div></div>
CSS :
div{
background : #448CCB;
width:300px;
height:300px;
}
In order to have the white cut out circle transparent and let the background show through it, you can use box-shadows on a pseudo element to minimize markup.
In the following demo, the blue color of the shape is set with the box shadow and not the background-color property.
DEMO
output:
This can also be responsive: demo
HTML:
<div></div>
CSS:
div {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
bottom: 50%;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 0px 300px 0px 300px #448CCB;
}
Is it okey ?
Demo
div{
width:100px;
height:100px;
background:#03b0d5;
display:block;
position:relative;
overflow:hidden;
}
div:after{
width:100px;
height:100px;
border-radius:50%;
background:#fff;
display:block;
position:absolute;
content:'';
top:-50px;
left:0;
}
Here is my sollution
HTML:
<div id="shape"></div>
CSS:
#shape {
width:250px;
height:250px;
background:#448ccb;
position:relative;
}
#shape:before {
content:" ";
position:absolute;
width:250px;
height:250px;
background:#fff;
left:0; top:-50%;
border-radius:50%;
}
Link in jsfiddler: demo
Solition with box-shadow:
HTML:
<div id="wrap">
<div id="shape"></div>
</div>
CSS:
#wrap {
background:#ccc;
padding:20px;
}
#shape {
width:250px;
height:250px;
position:relative;
overflow:hidden;
}
#shape:before {
content:" ";
position:absolute;
width:100%;
height:100%;
left:0; top:-50%;
border-radius:50%;
box-shadow:0 0px 0 250px #448ccb
}
Link in jsfiddler: demo
If you don't mind that the "eaten" bit is white and not transparent, yes:
http://jsfiddle.net/tWbx5/2/
<div></div>
CSS:
div {
width: 250px;
height: 250px;
margin: 10px;
background: #448CCB;
}
div:before {
content:" ";
background:white;
display: block;
width:250px;
height: 125px;
border-radius: 0 0 125px 125px;
}
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
In my header I have a logo with an image sprite on both sides of the image. I am trying to center them horizontally to the top of the browser. The header has to be positioned:fixed.
HTML:
<div id="headerbg">
<div id="header">
<ul id="navleft">
<li id="navhome"></li>
<li id="navnew"></li>
<li id="navbrands"></li>
</ul>
<div id="logo"></div>
<ul id="navright">
<li id="navsales"></li>
<li id="navlocation"></li>
<li id="navcontact"></li>
</ul>
</div>
</div>
CSS:
#headerbg
{
background-color: #ffffff;
width:100%;
height:50px;
z-index: 1000;
position: fixed;
top: 0;
left:0;
}
#header
{
width: 800px;
height: 100px;
margin: auto;
}
#logo
{
width:200px;
height:100px;
background:url(images/logo_small.jpg);
display:inline-block;
z-index: 2000;
}
/* NAVIGATION */
#navleft
{
position:relative;
}
#navleft li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navleft li, #navleft a
{
height:50px;
display:block;
}
#navright
{
position:relative;
}
#navright li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
z-index: 2000;
}
#navright li, #navright a
{
height:50px;
display:block;
}
I left out CSS for the hover images of the sprite to shorten my post. I appreciate any help I can get. Thanks!
You already know the width of the header and the logo. You then knnow that each ul should have a width: 300px; and just set them all to float:left; or display:inline;
#header ul {
width:300px;
}
#header {
display:inline-block;
*display:inline; /* IE hack */
}
EDIT
You could also apply specific CSS styles for psuedo element e.g.:
#header ul:first-child {
width:300px;
position:relative;
top:0;
left:0;
}
#header ul:last-child {
width:300px;
position:relative;
right:0;
left:0;
}
I have retyped your code to fit your needds (well what I assume is your needs)
see fiddle here http://jsfiddle.net/aLQYS/
And for the future, I will recommend you to use classes instead of Id's. Not only you save the ID tag for something more important such as javascript, but you also have the possibility of reusing your css styles by adding multiple classes to one object e.g.
CSS
.shadow {
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.box {
width:200px;
height:200px;
}
HTML
<div class="shadow box"></div>
Screenshots here
I'm trying to animate a hover for a full screen background image using CSS. (Screenshots 1&2) but I also want my navigation to use my list class styles instead of the navigation I used from this tutorial. (Screenshots 3&4). How can I get the classes to function as the adjacent sibling of the hovering images instead of the anchor?
Here is my CSS
html {
background: url(scarf6.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
.container {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
top:0;
left:0;
}
.container img {
position: absolute;
top: 0%;
left:0%;
z-index: -60;
height:100%;
}
.container li img {
position: absolute;
top: 0%;
left: 100%;
height:100%;
z-index: -50;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
ul {
list-style: none;
}
nav {
top:0%;
right:0%;
left:100%;
height:100%;
width:30px;
z-index: 1;
display: block;
}
li a:hover + img {
left: 0px;
}
.red {
background: #FF9999;
}
.white {
background:#FAF0E6;
}
.pink {
background: #FFC0CB;
}
.fuscia {
background:#FF0033;
}
.l1 {
height:4%;
width:100%;
}
.l2 {
height:.7%;
width:100%;
}
.l3 {
height:1.3%;
width:100%;
}
.l4 {
height:.7%;
width:100%;
}
.l5 {
height:1.3%;
width:100%;
}
.l6 {
height:.7%;
width:100%;
}
.l7 {
height:2.7%;
width:100%;
}
.l8 {
height:3.3%;
width:100%;
}
.l9 {
height:5.4%;
width:100%;
}
.l10 {
height:1.7%;
width:100%;
}
.l11 {
height:6.7%;
width:100%;
}
.l12 {
height:.8%;
width:100%;
}
.l13 {
height:4.2%;
width:100%;
}
.l14 {
height:5%;
width:100%;
}
.l15 {
height:5.8%;
width:100%;
}
.l16 {
height:3.3%;
width:100%;
}
.l17 {
height:2.5%;
width:100%;
}
.l18 {
height:1.1%;
width:100%;
}
.l19 {
height:34.5%;
width:100%;
}
.l20 {
height:3.1%;
width:100%;
}
.l21 {
height:5%;
width:100%;
}
.l22 {
height:6.2%;
width:100%;
}
And my HTML
<body>
<div class="container">
<div class="overlay">
<nav>
<li class="l1 pink">
Home
<img src="../../Cover.png" alt="">
</li>
<li>
About
<img class="hidden">
</li>
<li>
Clients
<img class="hidden">
</li>
<li>
Work
<img class="hidden">
</li>
<li>
Contact
<img class="hidden">
</li>
</nav>
</div>
</div>
</body>
Thank you for your help!
Place the image as background-image of li or a. If you don't want to display image, place it via background-position to some not-make-sence area - e.g. if image if 32px high, place it:
background-position: left 32px;
It will make this image somehow invisible. (Important note: it's better, that element with this background is as display: block). Then, when hovering, you will place image back:
...:hover {
background-position: left top;
}
I'm using this in many cases. Also when switching two images - in fact, both of them are in one image and only moving background-position when hovering.