So I was trying to make a website where if you click an img, a red block, 100% width, 100% height, covers everything.
body {
margin: 0;
background-color: white;
}
h1 {
font-size: 50px;
text-align: center;
font-family: Raleway;
color: red;
margin-top: 5%;
}
img {
margin-left: auto;
margin-right: auto;
display: block;
}
.redcover {
margin-top: -10%;
position: absolute;
width: 100%;
height: 110%;
background: red;
margin-left: -90%;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}
#redcovertoggle:checked~.redcover {
margin-left: 0%;
}
<div class="redcover"></div>
<h1>HERZENSSACHE</h1>
<label>
<input type="checkbox" for="redcovertoggle">
<img src="https://image.ibb.co/d2aN15/heart2.png" alt="redcovertoggleheart">
</label>
I already tried for="redcovertoggle" in the label tag, but all it does is make the img stop acting like a label.
To do it with css only you can use :target selector and a link for the image, eg:
body {
margin: 0;
background-color: white;
}
h1 {
font-size: 50px;
text-align: center;
font-family: Raleway;
color: red;
margin-top: 5%;
}
img {
margin-left: auto;
margin-right: auto;
display: block;
}
#redcover {
margin-top: -10%;
position: absolute;
width: 100vw;
height: 100vh;
background: red;
left: -100vw;
z-index: 999;
transition: left 1s;
}
#redcover:target { left:0; }
<body>
<div id="redcover"></div>
<h1>HERZENSSACHE</h1>
<label>
<img src="https://image.ibb.co/d2aN15/heart2.png" alt="redcovertoggleheart">
</label>
</body>
Related
I am trying to create an expanding css button. I have made some progress but can't seem to get it to work unless I use absolute positioning. Is there a way to make this type of button without needing it to be absolute positioned on a page. Thanks for any help. Below is what I have so far.
I want it to work without needing to be absolutely positioned on the page.
.add-new-button {
right: 250px;
position: fixed;
width: 40px;
height: 40px;
background-color: #1BA1FC;
border-radius: 40px;
transition: width 0.3s;
overflow: hidden;
cursor: pointer;
}
.add-new-button-icon {
top: 0;
right: 0;
z-index: 4;
position: absolute;
color: #fff;
transition: transform 0.2s;
width: 40px;
height: 40px;
}
.add-new-button-icon i {
top: 12px;
height: 100%;
margin-left: 14px;
position: relative;
}
.add-new-button:hover {
width: 110px;
}
.add-new-button:hover .add-new-button-icon {
transform: rotate(90deg);
}
.add-new-button-label {
width: 80px;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
text-transform: uppercase;
font-size: 14px;
text-align: center;
font-family: "Source Sans Pro", sans-serif !important;
font-weight: 700;
position: relative;
margin-top: 5px;
padding-left: 10px;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
opacity: 0;
}
.add-new-button:hover .add-new-button-label {
transition-delay: 0.1s;
visibility: visible;
opacity: 1;
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="add-new-button">
<div class="add-new-button-label">
Add
</div>
<div class="add-new-button-icon">
<i class="fa fa-plus"></i>
</div>
</div>
It seems (to me) that your button doesn't need to have position: fixed;. All it need is some sufficient space to roll out.
#container {
border: 2px black solid;
display: flex;
justify-content: flex-end;
width: 200px;
}
.add-new-button {
position: relative;
width: 40px;
height: 40px;
background-color: #1BA1FC;
border-radius: 40px;
transition: width 0.3s;
overflow: hidden;
cursor: pointer;
}
.add-new-button-icon {
top: 0;
right: 0;
z-index: 4;
position: absolute;
color: #fff;
transition: transform 0.2s;
width: 40px;
height: 40px;
}
.add-new-button-icon i {
top: 12px;
height: 100%;
margin-left: 14px;
position: relative;
}
.add-new-button:hover {
width: 110px;
}
.add-new-button:hover .add-new-button-icon {
transform: rotate(90deg);
}
.add-new-button-label {
width: 80px;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
text-transform: uppercase;
font-size: 14px;
text-align: center;
font-family: "Source Sans Pro", sans-serif !important;
font-weight: 700;
position: relative;
margin-top: 5px;
padding-left: 10px;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
opacity: 0;
}
.add-new-button:hover .add-new-button-label {
transition-delay: 0.1s;
visibility: visible;
opacity: 1;
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="container">
<div class="add-new-button">
<div class="add-new-button-label">
Add
</div>
<div class="add-new-button-icon">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
I'm trying to animate inside button but for some reason it won't work. Width of the button should shrink to 0 to the left
HTML
<div class="siteBtnShare">
<div class="share-text-wrapper">
<span class="share-text">SHARE</span>
</div>
</div>
SCSS
.siteBtnShare {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;
.share-text-wrapper{
width: 40px;
display: inline-block;
}
&:hover .share-text-wrapper{
width: 0;
}
}
EDIT: - Inside the button should shrink to 0, but it doesn't do anything. It remains visible
The width does shrink, you just don't see it because the text flows outside of the container:
.siteBtnShare {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;
}
.share-text-wrapper{
width: 40px;
display: inline-block;
overflow: hidden;
}
.siteBtnShare:hover .share-text-wrapper{
width: 0;
}
<div class="siteBtnShare">
<div class="share-text-wrapper">
<span class="share-text">SHARE</span>
</div>
</div>
Working code in SCSS:
.siteBtnShare {
position: relative;
display: inline-block;
font-family: 'Novecentosanswide-Medium';
width: 40px;
transition: width 1s;
overflow:hidden;
.share-text-wrapper{
width: 40px;
display: inline-block;
overflow: hidden;
}
&:hover .share-text-wrapper{
width: 0;
}
}
Try this, without the FontAwesome icon or with, as per your preference.
SCSS
.siteBtnShare {
background: #eee;
display: inline-block;
padding: 10px;
height: 20px;
width: auto;
color: #333;
&:hover {
.share-text-wrapper {
.share-text {
width: 100%;
}
}
}
}
.label {
display: inline-block;
width: 1em;
color: #888;
}
.share-text-wrapper {
display: inline-block;
white-space: nowrap;
margin-left: -1em;
padding-left: 1em;
.share-text {
display: inline-block;
width: 0%;
overflow: hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
}
HTML
<div class="siteBtnShare">
<span class="label"><i class="fa fa-share-alt" aria-hidden="true"></i></span>
<div class="share-text-wrapper">
<div class="share-text">
Share It Out
</div>
</div>
</div>
JSFiddle: https://jsfiddle.net/Jabideau/3bo4zxgc/
I want to make a header appear to have an animated underline when the parent element is hovered. Right now it is very close but I can't seem to position it correctly so that its width grows in both directions from its center, which is what I want it to do. Does someone know what I'm missing or need to add to my code to make this happen? The code below is what I think is relevant to fixing the situation. The entire project can be viewed via this CodePen as well. Thanks in advance! (The underlining is only applied to the first header when hovering).
HTML:
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline"></div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
<div class="image-block">
<h3>Swallow Tail</h3>
<img class="flex-image" src="https://source.unsplash.com/U--hvQ5MKjY">
</div>
<div class="image-block">
<h3>Directional</h3>
<img class="flex-image" src="https://source.unsplash.com/F3ePNdQb_Lg">
</div>
</div>
CSS:
.image-block:hover > h3{
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 10px;
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
Edit:
I am trying to use the same ideas from someone else's Underlining Effect CodePen. The biggest difference is I don't want to have an <a> inside my header.
If you apply width: 100% to the .underline rule it begins the animation from the center.
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%; /**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
Adjusting the width of the line
To adjust the width of the line you can change the following:
.underline{
margin: 10% /*<== Set to half of 'what's left' in this case half of 20% is 10%*/
width: 80%;
}
.image-block:hover .underline {
width: 80% /*<== Set to match the .underline width */
}
* {
box-sizing: border-box;
}
.row {
min-width: 100%;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.image-block {
position: relative;
width: 33.33%;
float: left;
margin-top: 0;
z-index: 5;
}
.image-block:hover {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.image-block h3 {
position: absolute;
text-align: center;
font-family: 'Roboto', sans-serif;
color: white;
top: 40%;
width: 100%;
font-size: 48px;
letter-spacing: 5px;
margin: 0;
transition: all .3s ease-in-out;
}
.image-block:hover>h3 {
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%;
/**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
.flex-image {
width: 100%;
height: auto;
display: flex;
}
#media all and (max-width: 1200px) {
.image-block {
width: 33.33%%;
}
}
#media all and (max-width: 1660px) {
.navbar a {
padding: 14px 14%;
}
}
#media all and (max-width: 1035px) {
.navbar a {
padding: 14px 12%;
}
}
#media all and (max-width: 880px) {
#top-image {
margin-top: 150px;
}
.image-block {
width: 100%;
margin: 0;
}
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar a:hover {
transform: scale(1);
}
}
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline">
</div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
</div>
I have a button that, when pressed, is supposed to expand the element behind it (.nav which contains .work and .contact) out in both directions. However, I can't seem to keep the button in the center.
$(function() {
var nav = $('.nav');
var button = $('.nav button');
button.on('click', function(){
nav.toggleClass('active');
if(nav.hasClass('active'))
button.text('');
else
button.text('');
});
});
html {
background: #f1f1f1;
}
.nav {
display: block;
margin: auto;
margin-top: 80px;
margin-bottom: 200px;
background: #ccc;
color: black;
text-align: center;
width: 350px;
height: 330px;
transition: width 0.5s;
}
.nav.active {
width: 1000px;
transition: width 0.5s;
}
.navigation button {
position: absolute;
width: 350px;
Height: 350px;
margin: 0 auto;
display: block;
background-color: #2e0513!important;
background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
background-repeat: no-repeat;
background-size: 325px 325px;
border: none;
transition: 0.5s ease-in-out;
}
.navigation.active button {
transform: scale(1.1);
transition: 0.5s ease-in-out;
}
.navigation:hover button {
box-shadow: 0px 0px 20px black;
transform: scale(1.01);
transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
box-shadow: none!important;
transform: scale(1.1)!important;
transition: 0.5s ease-in-out;
}
.navigation button img {
position: relative;
right: 30px;
bottom: 40px;
}
.work,
.contact {
position: relative;
visibility: hidden;
}
.work a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.contact a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.nav.active > .work {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: left;
left: 125px;
top: 150px;
}
.nav.active > .contact {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: right;
right: 125px;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<div class="nav">
<button>
</button>
<div class="work">
work
</div>
<div class="contact">
contact
</div>
</div>
</div>
Give the nav a style of position: relative. Then, toggle a class (or just add the styling, should work as well) to the button on click that does the following:
button.my-pressed-class {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This should keep it in the middle.
Edit: Keep in mind you already have a transform set on the button on hover. Just, add the translateX to hover when the button has the aforementioned class, to avoid it from moving around on hover.
add postion relative to .navigation and position absolute to .nav with left value
$(function() {
var nav = $('.nav');
var button = $('.nav button');
button.on('click', function(){
nav.toggleClass('active');
if(nav.hasClass('active'))
button.text('');
else
button.text('');
});
});
html {
background: #f1f1f1;
}
.navigation {
position: relative;
}
.nav {
display: block;
margin: auto;
margin-top: 80px;
margin-bottom: 200px;
background: #ccc;
color: black;
text-align: center;
width: 350px;
height: 330px;
transition: width 0.5s;
position: absolute;
left: 100px;
}
.nav.active {
width: 1000px;
transition: width 0.5s;
}
.navigation button {
position: absolute;
width: 350px;
Height: 350px;
margin: 0 auto;
display: block;
background-color: #2e0513!important;
background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
background-repeat: no-repeat;
background-size: 325px 325px;
border: none;
transition: 0.5s ease-in-out;
}
.navigation.active button {
transform: scale(1.1);
transition: 0.5s ease-in-out;
}
.navigation:hover button {
box-shadow: 0px 0px 20px black;
transform: scale(1.01);
transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
box-shadow: none!important;
transform: scale(1.1)!important;
transition: 0.5s ease-in-out;
}
.navigation button img {
position: relative;
right: 30px;
bottom: 40px;
}
.work,
.contact {
position: relative;
visibility: hidden;
}
.work a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.contact a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.nav.active > .work {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: left;
left: 125px;
top: 150px;
}
.nav.active > .contact {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: right;
right: 125px;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<div class="nav">
<button>
</button>
<div class="work">
work
</div>
<div class="contact">
contact
</div>
</div>
</div>
I tried to add a background image to the span but, for some reason, it doesn't seem to be properly loading. The jsfiddle is below.
P.S-I know its kinda straight "it doesn't works question" just got stuck for a while couldn't find a answer
http://jsfiddle.net/whnb3yf2/46/
<div class="learn">
<a>Learn More</a>
<span></span>
</div>
.learn
{
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a
{
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a
{
color: black;
margin-left: -20px;
}
.learn span
{
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
You need to add background-size: 9px 16px; to your .learn span rule.
.learn {
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a {
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a {
color: black;
margin-left: -20px;
}
.learn span {
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center center;
background-size: 9px 16px;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
<div class="learn">
<a>Learn More</a>
<span></span>
</div>
The issue you are having is that the background image for the button is too small. You can fix that by setting the background size equal to that of the button. For more information on the background-size attribute, check out http://www.w3schools.com/cssref/css3_pr_background-size.asp
.learn {
width: 200px;
height: 60px;
font-family: 'Open Sans',sans-serif;
background-color: transparent;
border:2px solid #fff;
position: relative;
text-align: center;
font-size: 18pt;
line-height:60px;
overflow: hidden;
}
.learn a {
color: white;
display: block;
transition: all 0.2s ease-in-out;
}
.learn:hover {
background-color: white;
}
.learn:hover a {
color: black;
margin-left: -20px;
}
.learn span {
background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-128.png) center center;
background-size: 9px 15px;
display: block;
width: 9px;
height: 16px;
position: absolute;
top: 22px;
left: 110%;
transition: all 0.2s ease-in-out;
}
.learn:hover span{
left: 80%;
}
body {
background-color: black;
}
<div class="learn">
<a>Learn More</a>
<span></span>
</div>