I'm working on some project and I've been trying to display a button after my whole element gets hovered. I think I'm using the right syntax, but things are not really working, I need help.
Code:
<div class="upgrade">
PURCHASE UPGRADE
<a href="#">
<div class="upgradeFooter">
<span>example</span>
</div>
</a>
</div>
.upgrade {
width: 24%;
height: 48%;
background: url('../background.jpg');
margin-right: 1%;
float: left;
margin-bottom: 2%;
transition: background 0.5s;
}
.upgrade:hover {
background: #d20a30;
}
.upgrade:hover ~ a.purchaseButton {
opacity: 1;
filter: alpha(opacity=100);
}
a.purchaseButton {
text-transform: uppercase;
background: #EEEEEE;
color: #000;
font-weight: 400;
padding: 15px;
margin-top: 100px;
margin-left: 18%;
float: left;
border-radius: 5px;
transition: background 0.5s;
opacity: 0;
filter: alpha(opacity=0);
}
a.purchaseButton:hover {
background: #ccc;
}
.upgradeFooter {
background: rgba(0, 0, 0, 0.3);
height: 20%;
margin-top: 25%;
box-sizing: border-box;
transition: background 0.5s;
float: left;
width: 100%;
}
.upgradeFooter span {
padding: 19px 0;
width: 100%;
float: left;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #fff;
}
.upgradeFooter:hover {
background: #d20a30;
}
Code in JSFiddle
I hope that you guys help me out, thanks in advance.
The problem is in
.upgrade:hover ~ a.purchaseButton
if you remove the ~ all will be working just fine.
Related
Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.
It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#pop:checked + .overlay {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>
I have boxes with some content but not all text is displayed. On click I toggle all the text but the problem is I don't want the bottom element to move, instead I want the toggled div to be on top of the bottom element. Would anyone help with ideas how to do this? Thank you.
Ps. Also, for some reason the transition/animation doesn't work.
Here is a link to codepen: https://codepen.io/christmastrex/pen/gOwGvap and here is my code:
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">“It’s not about weight it’s about how<br> your body changes”</p>
</div>
<div class="card__toggle">
<p>Doing resistance training and cardio combined and I have not lost one single ounce on the scale….I was feeling horribly frustrated being it has been a month so I decided to do a progress sequence and wth look at me now!! It’s not about weight, it’s about how your body changes when you eat right and exercise! Yay!!”</p>
</div>
</div>
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">“It’s not about weight it’s about how<br> your body changes”</p>
</div>
<div class="card__toggle">
<p>Doing resistance training and cardio combined and I have not lost one single ounce on the scale….I was feeling horribly frustrated being it has been a month so I decided to do a progress sequence and wth look at me now!! It’s not about weight, it’s about how your body changes when you eat right and exercise! Yay!!”</p>
</div>
</div>
------------------------------------------------------------
.card {
background-color: #fff;
max-width: 490px;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74,74,74,.3);
&__toggle {
overflow: hidden;
max-height: 55px;
p {
font-size: 16px;
margin-bottom: 10px;
}
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after{
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all .3s ease-in-out;
}
}
&.active {
.card__toggle {
max-height: 700px;
transition: all .3s ease-in-out;
}
.card__header {
&::after {
background-color: #fff;
color: red;
transform: rotate(180deg);
}
}
}
}
-----------------------------------------------------
$(document).ready(function() {
$(".js-toggle").on("click", function () {
$(".card__header.active").not($(this)).removeClass("active").next(".js-card-toggle").slideUp("slow");
$(this).toggleClass("active").next(".js-card-toggle").slideToggle("slow");
$(this).closest(".card").toggleClass("active").siblings().removeClass("active");
});
});```
I think you are trying to achieve this, copy it and see if it works.
HTML:
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">
“It’s not about weight it’s about how<br />
your body changes”
</p>
</div>
<div class="card__toggle">
<p>
Doing resistance training and cardio combined and I have not lost one
single ounce on the scale….I was feeling horribly frustrated being it has
been a month so I decided to do a progress sequence and wth look at me
now!! It’s not about weight, it’s about how your body changes when you eat
right and exercise! Yay!!”
</p>
</div>
</div>
<div class="card">
<div class="card__header js-toggle">
<p class="card__title">
“It’s not about weight it’s about how<br />
your body changes”
</p>
</div>
<div class="card__toggle">
Doing resistance training and cardio combined and I have not lost one single
ounce on the scale….I was feeling horribly frustrated being it has been a
month so I decided to do a progress sequence and wth look at me now!! It’s
not about weight, it’s about how your body changes when you eat right and
exercise! Yay!!”
</div>
</div>
SCSS:
.
card {
max-height: 125px;
overflow: hidden;
background-color: #fff;
max-width: 490px;
padding: 20px;
margin-bottom: 30px;
border-radius: 5px;
position: relative;
height: 150px;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74, 74, 74, 0.3);
transition: 0.4s ease;
&.active {
max-height: 210px;
}
&__toggle {
background-color: white;
p {
font-size: 16px;
margin-bottom: 10px;
}
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
}
&.active {
.card__toggle {
transition: all 0.3s ease-in-out;
width: 100%;
z-index: 1;
background-color: white;
}
.card__header {
&::after {
background-color: #fff;
color: red;
transform: rotate(180deg);
}
}
}
}
jQuery:
$(".js-toggle").click(function () {
console.log($(this).parents(".card"));
$(this).parents(".card").toggleClass("active");
});
I managed to do find a solution after all.. I made changes to the css only
background-color: #fff;
max-width: 490px;
padding: 20px;
margin: 0 auto 70px auto;
border-radius: 5px;
position: relative;
box-sizing: border-box;
box-shadow: 0 3px 30px 0 rgba(74, 74, 74, 0.3);
&::after {
content: "";
position: absolute;
height: 20px;
background-color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
bottom: -40px;
left: 0;
z-index: 10;
width: 100%;
box-shadow: 0 10px 20px -7px rgba(74, 74, 74, 0.3);
transition: all 0.3s ease-in-out;
transition-delay: 0.5s;
}
&__toggle {
overflow: hidden;
max-height: 45px;
position: absolute;
z-index: 1;
background-color: #fff;
margin-left: -20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 5px;
box-shadow: 0 10px 15px -12px rgba(74, 74, 74, 0.3);
transition: all 1s ease-in-out;
p {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.3;
}
&-s {
max-height: 18px;
}
}
&--s {
max-width: 350px;
}
&__img {
border: 5px solid #d54f80;
border-radius: 5px;
padding: 5px 5px 1px 5px;
margin-bottom: 20px;
}
&__title {
font-weight: 900;
margin-bottom: 5px;
}
&__header {
position: relative;
cursor: pointer;
&::after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
font-weight: 400;
display: inline-block;
background-color: #d54f80;
border: 2px solid #d54f80;
color: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
font-size: 14px;
text-align: center;
line-height: 2;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
}
&.active {
&.card::after {
background-color: transparent;
transition: all 0s ease-in-out;
}
.card__toggle {
max-height: 700px;
}
.card__header {
&::after {
background-color: #fff;
color: pink;
transform: rotate(180deg);
}
}
}
}
EDITED JSFIDDLE
The goal to display a transition upward height when the button is hovered, but this line of CSS .btn-position:hover ~ .bg-transit { height: 430px !important;} seems it expands downwards instead upward. Is there a way to transition UPWARD?
I dont want to add any JS to it.
HTML
<div class="career-wrapper-positions">
<div class="section-positions">
<div class="position-wrap">
<div class="position-box" id="video_interpreter">
<div class="employees"><img src="http://staging.svrs.com/assets/images/careers2018/position-lady1-1.png" alt="SVRS | Video Interpreter positions"></div>
<div class="position-tited-top-bg"></div>
<div class="position-box-info">
<div class="position-header"><h5 class="h5-careers18">CUSTOMER SERVICES</h5></div>
<div class="position-subheader" id="subheader1">positions</div>
<div class="position-p">Individually, passionate about the work. Collectively, the largest sales workforce in the world.</div>
<div class="btn-position">
<button onclick="location.href='#'" class="position-btn" id="btn1-position">Apply now</button></div>
<div class="bg-transit"></div>
</div>
</div>
</div>
</div>
CSS
.section-positions { margin: 0 auto; width: 100%; }
.position-header { text-align: center; }
.position-header p { margin-top: 0; }
.position-wrap { height: 525px; position: absolute; z-index: 10; width: 100%; text-align: center; display: flex; margin-top: 175px; }
.position-box { width: 209px !important; height: 330px; display: block; margin: 20px; background-color: #231f20; z-index: 2;}
.position-tited-top-bg { width: 209px !important; height: 20px; background-color: #231f20; -webkit-transform: skew(0deg, 2deg); transform: skew(0deg, 2deg); margin-top: -15px; position: relative;z-index: -2; }
.position-header { height: 15px;color:#ffbb11; font-size: 22px; font-family:'Source Sans Pro', sans-serif; font-weight: 400; }
.position-subheader { color: #ffbb11; margin-top: 10px; font-family:'Source Sans Pro', sans-serif;}
.position-p { color: #fff; padding: 0 10px 0 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px; margin-top: 10px; line-height: 20px; }
.position-btn { background-color: #ffbb11; width: 150px; height: 41px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 50px; }
.position-box-info { padding-top: 10px; }
/* this is the button to trigger a new height size transition of the background box */
.bg-transit { width: 209px !important; height: 338px; display: block; background-color: #ff0000; z-index: -1; position: relative; top: -280px; transition-property: height; transition-duration: 0.5s;}
.btn-position:hover ~ .bg-transit { height: 430px !important;}
.position-btn:hover { background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; }
.employees { position: absolute; margin-top: -210px; width: 207px; margin-left: 5px; z-index: 9999;}
.position-btn:hover ~ .position-box-info selects all siblings .position-box-info that come after a .position-btn:hover. Since .position-box-info is actually the parent of the .position-btn element, nothing gets selected. In fact, you can't select a parent from a child, so you either have to add a class with javascript or change your HTML.
Also, you seem to miss a </div> closing tag.
I am just attempting a simple fix. For some reason my divider isn't showing up on hover? How can I get it to show up like the other text does? I have another example of how i got the divider to look on other pages...
http://runningfish.net/finestc/about/
Right underneath the header of the page that says "About"
Also, what I am currently working with is runningfish.net/finestc
You can see the live code there right underneath the section that says "Recent Sales".
I am still a fledgling coder so if I am doing something inefficiently or could be doing better that you notice, please point it out! I want to get better at coding. Critique welcome!
Thanks!
.grids {
width: 33.33%;
float: left;
display: inline-block;
position: relative;
}
.grids img {
display: block;
height: 33.33vh;
width: 100%;
}
.grid-image-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.grid-image-description h2 {
font-family: playfairdisplay;
font-size: 1.7em;
color: #fff;
}
.grid-image-description p {
font-family: playfairdisplay;
font-size: 1.0em;
color: #fff;
}
.grid-image-description hr {
border-top: 1px;
border-color: #001532;
border-style: solid;
box-shadow: 2px 1px 15px #fff;
margin: 0 0 0 10px;
max-width: 200px;
}
.grids:hover .grid-image-description {
visibility: visible;
opacity: 1;
}
.grids-description {
transition: .5s;
transform: translateY(1em);
}
.grids:hover .grid-image-description {
transform: translateY(0);
}
<a href="#nogo">
<div class="grids">
<img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
<div class="grid-image-description">
<h2 class="grids-header">House For Sale</h2>
<hr>
<p class="grids-description">123 mulbury street</br>san diego, ca 92101
</p>
</div>
</div>
</a>
Add a width value to <hr>
.grids {
width: 33.33%;
float: left;
display: inline-block;
position: relative;
}
.grids img {
display: block;
height: 33.33vh;
width: 100%;
}
.grid-image-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.grid-image-description h2 {
font-family: playfairdisplay;
font-size: 1.7em;
color: #fff;
}
.grid-image-description p {
font-family: playfairdisplay;
font-size: 1.0em;
color: #fff;
}
.grid-image-description hr {
border-top: 1px;
border-color: #001532;
border-style: solid;
box-shadow: 2px 1px 15px #fff;
margin: 0 0 0 10px;
max-width: 200px;
/* added */
width: 200px;
}
.grids:hover .grid-image-description {
visibility: visible;
opacity: 1;
}
.grids-description {
transition: .5s;
transform: translateY(1em);
}
.grids:hover .grid-image-description {
transform: translateY(0);
}
<a href="#nogo">
<div class="grids">
<img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
<div class="grid-image-description">
<h2 class="grids-header">House For Sale</h2>
<hr>
<p class="grids-description">123 mulbury street<br>san diego, ca 92101
</p>
</div>
</div>
</a>
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>