How to make the opacity layer the same size as the img.
Right now the opacity layer has the same size as my img, but that's only because I edited it too the same size, but when I make my screen smaller it won't be the same size anymore as the img.
PS: is there a way to make content: "Work"; show up in the middle of the img instead at the top?
fiddle:
http://jsfiddle.net/nSLXF/
Html:
<body>
<img id="logo" src="Images/logo.png" alt="Logo">
<hr id="line" size="4" color="#09b981" align="center">
<a id="reach" href="about.html"><img src="Images/Reach.png" alt="Reach"></a>
<a id="contact" href="contact.html"><img src="Images/contact.png" alt="contact"></a>
<a id="werk" href="work.html"> <img src="Images/work.png" alt="werk"> </a>
</body>
css:
#reach img
{
text-align: center;
display: block;
margin: 0 auto;
width: 100%;
height:auto;
}
#reach:after {
content:'Work';
color:#fff;
position:absolute;
margin-top:11.2%;
margin-left: 25.2%;
width:49.6%; height:40.3%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.8s;
-webkit-transition: all 0.8s;
font-size: 42px;
font-family: Helvetica;
}
#reach:hover:after
{
opacity:1;
}
In fact you set the size and left, top wrongly for the layer which is actually a :after element. You can just set left:0, top:0 and width:100%, height:100% for it and use position:relative for the a element. The size of img should fit the size of the parent a element:
#reach {
text-align: center;
display: block;
margin: 0 auto;
width: 50%;
position:relative; /* add this */
}
#reach:after {
content:'Work';
color:#fff;
position:absolute;
/* update this */
width:100%;
height:100%;
top:0;
left:0;
/*------*/
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.8s;
-webkit-transition: all 0.8s;
font-size: 42px;
font-family: Helvetica;
}
Demo.
Related
I'm creating a transition that flips a contact card (link) but the backface-visibility property is giving me problems.
As can be seen in the codepen, nothing disappears after being flipped (even though it has turned its "backface" to the screen).
I tried creating a child div inside the card, to inherit its size and tried flipping it from the start so that, when the card were to be flipped, that div would have been on its front side and covered the rest.
The backface-visibility, though, doesn't work on that child div:
.cardBack{
padding:20px 50px;
background-color:white;
position:absolute;
width:inherit;
height:inherit;
backface-visibility:hidden;
transform:rotateX(180deg);
z-index:101;
}
If I either remove the transform:rotateX or the backface-visibility property, the .cardBack div covers the rest of the content both when the card is flipped and unflipped.
If I remove them both, it does the exact opposite of what I want: the .cardBack div obscures the content when the card is not flipped, and becomes invisible when the card is flipped.
If I leave it like this, the .cardBack div is never visible.
Here's the updated code.
Chrome has a weird bug when rotating elements, so backface-visibility was needed after all, just not on the .card itself.
$(document).ready(function(){
$(".card").click(function(){
$(this).toggleClass("turned");
$(this).toggleClass("unturned");
});
});
body{
background-color:#5AEDBC;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow:hidden;
}
.card:after{
box-sizing:border-box;
backface-visibility:hidden;
display:block;
content:'';
width:200px;
height:400px;
left:380px;
position:absolute;
background: cadetblue;
transform:rotateZ(-40deg);
backface-visibility:hidden;
}
.card{
padding:20px 50px;
overflow:hidden;
position:absolute;
width:350px;
height:120px;
display: flex;
justify-content: center;
align-items:center;
flex-direction: row;
background-color:white;
font-family:'Raleway', sans-serif;
border:5px solid rgba(0,100,100, 0.75);
color:#008A45;
margin-top:100px;
transition:all 1s ease;
transform-origin:0 100%;
transform-style: preserve-3d;
}
.cardBack {
width:100%;
height:100%;
position:absolute;
top: 0;
left: 0;
background-color:white;
z-index:101;
}
.card.unturned .cardBack{
opacity: 0;
transition: opacity 0.25s ease 0.25s;
}
.card.turned .cardBack{
opacity: 1;
transition: opacity 0s ease 0.15s;
}
/* this is needed for chrome */
.card > * {
backface-visibility: hidden;
}
/* */
.card.turned{
transition:all 1s cubic-bezier(.17,.67,.59,1.35);
transform:rotateX(-180deg);
}
.info{
display: flex;
justify-content: center;
flex-direction: column;
text-align:right;
backface-visibility:hidden;
}
.title{
font-size:26px;
font-weight:bold italic;
color:black;
padding:5px 0;
display:block;
}
.desc{
font-size:18px;
color:#ccc;
padding:5px 0;
display:block;
}
.img{
border-radius: 50%;
width: 90px;
height: 90px;
margin-left:20px;
backface-visibility:hidden;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 1</span><span class="desc">Description of the interesting person 1</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 2</span><span class="desc">Description of the interesting person 2</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 3</span><span class="desc">Description of the interesting person 3</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
View on Codepen.io
I have a div in which I'm trying to center an image. It centers perfectly if position is set to fixed, but when position is set to absolute, the image is a few pixels too much to the right.
I can't have position set to fixed because this div scrolls in from the top when the user clicks something, so I can't have it be visible until that moment. I've never had this problem before. Can anyone tell me what's wrong?
html:
<div class="header">
<img class="logo" src="img/navbar_title.jpg"/>
<img class="tab" src="img/mid_tab.png" /><!-- image to be centered -->
<div class="header_social">
<img src="img/button_pg.jpg" />
<img src="img/button_facebook.jpg" />
<img src="img/button_twitter.jpg" />
</div>
</div>
css:
.header
{
position:fixed;
top:-100px;
width:100%;
height:30px;
padding:10px;
background-color:black;
color: white;
z-index:10;
margin-top:0px;
box-shadow: gray 3px 0px 10px;
}
.header .logo
{
position: absolute;
top: 10px;
z-index: 4;
left: 20px;
}
.header .tab { /* not working right */
position: absolute;
top: 0;
z-index: 4;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.header h1
{
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size:14pt;
display:inline-block;
line-height:30px;
float:left;
margin-top: 0;
margin-left: 20px;
letter-spacing: .05em;
color: #303030;
}
.header .header_social
{
float:right;
height:30px;
line-height:30px;
width:150px;
}
This is due to box-sizing. When you position fixed, it is relative to the entire screen, period. When you position absolute, it is relative to the nearest non-static position parent. In your case, that is your div.header. Your div.header has a padding and a width 100%, so it is actually 100% + 20. Set box-sizing: border-box on your div.header and your image will move a few pixels to the left. :)
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've been trying to achieve the effect of mouse over on a picture which dims its background and brings over a text on top.
Then I wanted a nice centralized text when I moused over.
These both things were achieved, but then I ran into two small problems.
How can I not dim the text on top when I dim the background of the picture
How can I centralized the text without specifying width and height of the picture (to enable responsive design)
HTML
<div id="bottomWide">
<ul>
<li class="first">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div class="all-canvas">
<div class="all-text">
<span class="title">A Heading</span><br>
<span class="text">Couples of Lines of Text will come here</span><br>
<span class="shop">See Details.</span>
</div>
</div>
</li>
<li class="second">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div class="all-canvas">
<div class="all-text">
Some text here, style as needed
</div>
</div>
</li>
</ul>
</div>
CSS
#bottomWide{
width:100%;
margin:0 auto;
}
#bottomWide ul{
margin:0;
padding:0;
}
#bottomWide li{
list-style-type: none;
display: inline-block;
width:50%;
text-align:justify;
float: left;
/* For Mouse Over*/
position: relative;
display: inline-block;
}
#bottomWide li:last-child img {
border-left: 4px solid #fff;
}
#bottomWide img{
width:100%;
}
#bottomWide li div.all-canvas{
position: absolute;
top: 0;
left: 0;
/* 100% will equal the dimensions of the image, as nothing else will be inside the .container */
width: 100%;
height: 100%;
color: #fff;
background-color: #000;
opacity: 0;
/* This will create the fade effect */
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
/* Include all required vendor prefixes for opacity and transition */
margin: 0 auto;
}
#bottomWide li:last-child div.all-canvas {
margin-left: 4px;
}
#bottomWide li div.all-canvas:hover {
opacity: 0.7;
}
#bottomWide li:last-child div.all-canvas:hover {
opacity: 0.7;
margin-left: 4px;
}
div.all-text {
height:358px; /* This is what I want to change to %*/
width: 623px; /* This is what I want to change to %*/
text-align:center;
border:1px solid silver;
display: table-cell;
vertical-align:middle;
margin: 0 auto;
}
div.all-text span.title { padding: 3px; font: 18px/1.35 "Open Sans", Helvetica, sans-serif; text-transform: uppercase;}
The Output looks something like this:-
(Notice the dim text on top of the picture; hoping to make it solid)
Thanks.
If you set opacity to an element, all children (including the text) will have the opacity as well. You could try changing the background color using rgba:
#bottomWide li div.all-canvas:hover {
background-color: rgba(0,0,0, 0.7);
}
You'll still need to toggle opacity 0 to 1 so it can become visible, but the background-color should be transparent.
Centering the text will be a lot more tricky because you're trying to make it responsive. Since the text won't have a fixed height, you will probably have to use Javascript to calculate it. You could start with this CSS:
.theText {
position: absolute;
top: 50%;
margin-top: -20px; // Should be half of the element height
}
You'll have to use javascript to measure the height of .theText and set a negative margin-top accordingly...
I've been trying to achieve the effect of mouse over on a picture which dims its background and brings over a text on top.
Then I wanted a nice centralized text when I moused over.
These both things were achieved, but then I ran into a small problems.
How can I centralized the text without specifying width and height of the picture (to enable responsive design)
The Problem is that If I specify the width/Height, it would show the text perfectly centered, but when I change the page dimensions, it loses the center point.
HTML
<div id="bottomWide">
<ul>
<li class="first">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div class="all-canvas">
<div class="all-text">
<span class="title">A Heading</span><br>
<span class="text">Couples of Lines of Text will come here</span><br>
<span class="shop">See Details.</span>
</div>
</div>
</li>
<li class="second">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div class="all-canvas">
<div class="all-text">
Some text here, style as needed
</div>
</div>
</li>
</ul>
</div>
CSS
#bottomWide{
width:100%;
margin:0 auto;
}
#bottomWide ul{
margin:0;
padding:0;
}
#bottomWide li{
list-style-type: none;
display: inline-block;
width:50%;
text-align:justify;
float: left;
/* For Mouse Over*/
position: relative;
display: inline-block;
}
#bottomWide li:last-child img {
border-left: 4px solid #fff;
}
#bottomWide img{
width:100%;
}
#bottomWide li div.all-canvas{
position: absolute;
top: 0;
left: 0;
/* 100% will equal the dimensions of the image, as nothing else will be inside the .container */
width: 100%;
height: 100%;
color: #fff;
background-color: #000;
opacity: 0;
/* This will create the fade effect */
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
/* Include all required vendor prefixes for opacity and transition */
margin: 0 auto;
}
#bottomWide li:last-child div.all-canvas {
margin-left: 4px;
}
#bottomWide li div.all-canvas:hover {
opacity: 0.7;
}
#bottomWide li:last-child div.all-canvas:hover {
opacity: 0.7;
margin-left: 4px;
}
div.all-text {
height:358px; /* This is what I want to change to %*/
width: 623px; /* This is what I want to change to %*/
text-align:center;
border:1px solid silver;
display: table-cell;
vertical-align:middle;
margin: 0 auto;
}
div.all-text span.title { padding: 3px; font: 18px/1.35 "Open Sans", Helvetica, sans-serif; text-transform: uppercase;}
Thanks.