I am having two different issues. The first is really irritating. I am attempting to align the text with the image inside of the first box, so that they are side-by-side an inline fashion. I am not sure what I am doing wrong and I do not want to use floats.
Secondly, I am attempting to get the image to transform: translate on the x-axis on hover. The thing is, I want the image to transform on the .extra-box:hover...not on the actual image, but I only want the image to move. I cannot figure this out.
What am I doing wrong?
#extra {
margin: 25px auto;
width: 460px;
height: auto;
}
.extra-box {
position: relative;
width: 40%;
padding: 8px;
border-radius: 3px;
/*border: 1px solid #739BAF;*/
border: 2px solid black;
display: inline-block;
background: none;
transition: 0.5s ease;
}
.extra-box:hover {
border: 2px solid red;
transition: 0.5s ease;
}
.extra-box:first-child {
margin-left: 0;
width: 40%;
margin-right: 10%;
}
.extra-box:last-child {
width: 40%;
}
.extra-box a {
text-decoration: none;
}
.extra-box-text {
color: black;
font-size: 1em;
display: inline-block;
width: auto;
}
.extra-box-icon img {
padding-left: 5px;
width: 15px;
height: auto;
display: inline-block;
-webkit-transition: all .5 ease-in-out;
transition: all .5 ease-in-out;
/*transform: translateX(30px);
-webkit-transform: translateX(30px);*/
}
<div id="extra"><div class="extra-box">
<a href="contact">
<div class="extra-box-text">Need help?<br>Contact Us Now</div><div class="extra-box-icon"><img src="icons/right-arrow.png"></div>
</a>
</div><div class="extra-box">
<a href="register">
<div class="extra-box-text">Need an account?<br>Register Now</div>
</a>
</div>
</div>
As other answers pointed out, you were missing a display: inline-block, but the problem was in .extra-box-icon
I have also added the transform for the image: (See the beginning of the CSS)
.extra-box-icon {
display: inline-block;
}
img {
transition: transform 1s;
}
.extra-box:hover img {
transform: translateX(-100px);
}
#extra {
margin: 25px auto;
width: 460px;
height: auto;
}
.extra-box {
position: relative;
width: 40%;
padding: 8px;
border-radius: 3px;
/*border: 1px solid #739BAF;*/
border: 2px solid black;
display: inline-block;
background: none;
transition: 0.5s ease;
}
.extra-box:hover {
border: 2px solid red;
transition: 0.5s ease;
}
.extra-box:first-child {
margin-left: 0;
width: 40%;
margin-right: 10%;
}
.extra-box:last-child {
width: 40%;
}
.extra-box a {
text-decoration: none;
}
.extra-box-text {
color: black;
font-size: 1em;
display: inline-block;
width: auto;
}
.extra-box-icon img {
padding-left: 5px;
width: 15px;
height: auto;
display: inline-block;
-webkit-transition: all .5 ease-in-out;
transition: all .5 ease-in-out;
/*transform: translateX(30px);
-webkit-transform: translateX(30px);*/
}
<div id="extra">
<div class="extra-box">
<a href="contact">
<div class="extra-box-text">Need help?
<br>Contact Us Now</div>
<div class="extra-box-icon">
<img src="icons/right-arrow.png">
</div>
</a>
</div>
<div class="extra-box">
<a href="register">
<div class="extra-box-text">Need an account?
<br>Register Now</div>
</a>
</div>
</div>
Add vertical-align:top; in .extra-box class to align it to same level.
to fix the alignment issue and if you don't want to use float, you can change the display property of .extra-box-text and extra-box-text img to inline-block
.extra-box-text, .extra-box-text img{
display:inline-block;
width: /*adjust as needed*/
}
to deal with the animation, i suggest you set the image itself as a background of .extra-box, you would then change the background-position on hover
Hope this helps
Related
I am trying to create an effect when div class="container" is being hovered, a smooth upper transition occurs of another div from bottom. Only during hover, this should happen cause I want that .bottom div to be hidden. When that div is not hidden, I can see the effect as I want. But as I hide the bottom div, that hovering effect smooth transition effect cannot be seen. Check this code once.
HTML CODE
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
CSS code
.box{
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top:80px;
left:0;
/* display: none; */
}
.box:hover .bottom {
display: block;
transition: linear 0.2s;
top:55px;
}
Here is the codepen link
https://codepen.io/Biebk/pen/MWpREqb
First off, rather than display: none to hide the incoming element altogether, you can set its opacity to 0, and then when the parent is hovered, set it to 1, like so:
.bottom {
opacity: 0;
}
.box:hover .bottom {
opacity: 1;
}
I suppose that given you want an incoming "pull-up" effect on hover, you want to that element to also "pull-down" when the hover ends. You can reverse the same effect by using a :not(:hover) on the parent element:
.box:not(:hover) .bottom {
opacity: 0;
}
Also, be sure to set the transition on the non-hovered state. The following example provides the smooth transition you're looking for:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
transition: all .25s ease;
}
.box:not(:hover) .bottom {
top: 80px;
opacity: 0;
}
.box:hover .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
<div class="bottom">
Everyone
</div>
</div>
A secondary approach would be to place the bottom div as a sibling to the box, and use the adjacent sibling combinator to apply the hover effects:
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
font-size: 20px;
background: pink;
width: 80px;
text-align: center;
position: absolute;
left: 0;
top: 80px;
opacity: 0;
cursor: default;
transition: all .25s ease;
}
.box:hover + .bottom {
top: 55px;
opacity: 1;
}
<div class="box">
Hello
</div>
<div class="bottom">
Everyone
</div>
Use opacity property rather than display to achieve the desired effect, then
use the following code
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
opacity: 0;
}
.box:hover .bottom{
opacity: 1;
transition: opacity 0.2s , top 1s;
top: 55px;
}
Use the following code.
.box {
border: 1px solid black;
display: inline-block;
border-radius: 3px;
padding: 8px;
font-size: 20px;
}
.hovered{
transition: all .2s;
}
.bottom {
background: pink;
width: 80px;
text-align: center;
position: absolute;
top: 80px;
left: 0;
visibility: hidden;
}
.hovered:hover+.bottom {
transition: all .2s;
top: 55px;
visibility: visible;
}
<div class="box">
<div class="hovered">Hello</div>
<div class="bottom">
Everyone
</div>
</div>
This question already has answers here:
HTML Div border not showing
(3 answers)
Closed 2 years ago.
I want to add borders for images and my top-nav and here is my code I have tried
.navtop {
background: #b7f582;
width: 100%;
height: 100px;
overflow: hidden;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border-color: black;
border-width: 5px;
}
<div class="navtop">
<img src="RingLogo.png">
Home
</div>
How can I add a border color to a <div> area and and image? See, I can add a border onto buttons but not anything else.
Use the border in one statement for simplicity because you are missing the border-style:
border: 5px solid black;
You can check for other border-styles and other options via this link.
You haven't specified the border-style, that's why it's not working. Either add border-style: solid or use the shorthand to define all 3 properties (border-width, border-style and border-color) in a single line: border: 5px solid black.
The reason why defining only border-width and border-color is working on <button>s is that browsers apply some default styles, so buttons already have a border-style defined, as shown below:
console.log(window.getComputedStyle(document.getElementById('defaultButton')).borderStyle);
.navtop {
background: #b7f582;
height: 100px;
overflow: hidden;
border: 5px solid green;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border: 5px solid black;
box-sizing: border-box;
}
#styledButton {
border-color: red;
border-width: 5px;
}
<div class="navtop">
<img src="RingLogo.png">
Home
<button id="defaultButton">Foo</button>
<button id="styledButton">Bar</button>
</div>
you can do something like this also close the </div>, div is not self closing element.
.navtop {
background: #b7f582;
width: 100%;
height: 110px;
overflow: hidden;
border:5px solid red;
}
.navtop a {
width: auto;
min-width: 90px;
text-align: center;
text-decoration: none;
height: 100px;
-webkit-transition: 0.5s;
background: #82a8f5;
float: left;
}
.navtop a:hover {
transition: 0.5s;
transform: translateY(10px);
background: #d96cbc;
color: black;
}
.navtop img {
float: left;
width: 100px;
height: 100px;
border: 5px solid blue;
}
<style>
</style>
<div class="navtop">
<img src="http://placekitten.com/301/301">
Home
</div>
I'm trying to do a thumbnail page with a hover transition that zooms and displays a description. EDIT: I do not want to use jquery.
Problem 1. The hovered div pushes the neighbor div out of alignment. All the thumbs should stay in nice neat rows.
Problem 2. The hovered div pushes the bottom of the container down.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
overflow: hidden;
transition: all 200ms ease-in;
transform: scale(1);
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
height: 300px;
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 150px;
width: 150px;
}
<div class="container">
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
</div>
You can update your code like below. You fix the alignment of the inline-block elements (not mandatory but to make sure they will stay at the top) and you adjust the height of the description instead of the parent element.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
transition: all 200ms ease-in;
transform: scale(1);
vertical-align:top; /* added */
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 0;
width: 150px;
overflow:hidden;
transition: all 200ms ease-in;
}
.tn-wrapper:hover .descr-box{
height: 150px;
}
<div class="container">
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
</div>
I'm not sure if this is the desired look you're trying to achieve but check out this example
I've added a flexbox to your container, changed your transform-origin and utilized the appropriate margins to keep your spacing.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
display:flex;
justify-content:center;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
transition: all 200ms ease-in;
transform: scale(1);
transform-origin:top;
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform-origin:top;
transform: scale(1.5);
margin:5px 43px 305px 43px;
}
I am trying to get the width and height of the image #add-cc-img when hovering over the parent element #add-new-cc + .credit-card. How can I keep the parent's width and height to remain in its original form and only change the size of the image?
.credit-card {
border: 1px solid #CDCDCD;
width: 30%;
height: 250px;
display: inline-block;
margin: 20px 3% 20px 0;
vertical-align: top;
}
.credit-card-inner {
margin: 25px;
}
#add-new-cc {
cursor: pointer;
transition: .5s;
-webkit-transition: .5s;
}
#add-new-cc:hover,
#add-cc-img {
background: #F7F7F7;
transition: .5s;
-webkit-transition: .5s;
height: 125px;
width: 125px;
}
#add-new-cc-title {
font-size: 1.3em;
margin-bottom: 40px;
text-align: center;
}
#add-cc-img {
height: 100px;
width: 100px;
display: block;
margin: 0 auto;
}
<div class="credit-card" id="add-new-cc">
<div class="credit-card-inner">
<h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3>
<img src="images/add-circle.png" alt="Add New Credit Card" id="add-cc-img">
</div>
</div>
Use transform: scale, it will resize the image in a much better (looking) way
(and remove the comma in #add-new-cc:hover #add-cc-img { ... })
I added transition: .5s; to the #add-cc-img { ... } rule, so it will animate on un-hover as well.
.credit-card {
border: 1px solid #CDCDCD;
width: 30%;
height: 250px;
display: inline-block;
margin: 20px 3% 20px 0;
vertical-align: top;
}
.credit-card-inner {
margin: 25px;
}
#add-new-cc {
cursor: pointer;
transition: .5s;
-webkit-transition: .5s;
}
#add-new-cc-title {
font-size: 1.3em;
margin-bottom: 40px;
text-align: center;
}
#add-cc-img {
height: 100px;
width: 100px;
display: block;
margin: 0 auto;
transition: .5s;
}
#add-new-cc:hover #add-cc-img {
background: #F7F7F7;
transition: .5s;
transform: scale(1.25);
}
<div class="credit-card" id="add-new-cc">
<div class="credit-card-inner">
<h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3>
<img src="images/add-circle.png" alt="Add New Credit Card" id="add-cc-img">
</div>
</div>
it seems you don't need to use comma here: #add-new-cc:hover, #add-cc-img . Without comma it seems to work as it should
.credit-card {
border: 1px solid #CDCDCD;
width: 30%;
height: 250px;
display: inline-block;
margin: 20px 3% 20px 0;
vertical-align: top;
}
.credit-card-inner {
margin: 25px;
}
#add-new-cc {
cursor: pointer;
transition: .5s;
-webkit-transition: .5s;
}
#add-new-cc:hover
#add-cc-img {
background: #F7F7F7;
transition: .5s;
-webkit-transition: .5s;
height: 125px;
width: 125px;
}
#add-new-cc-title {
font-size: 1.3em;
margin-bottom: 40px;
text-align: center;
}
#add-cc-img {
height: 100px;
width: 100px;
display: block;
margin: 0 auto;
}
<div class="credit-card" id="add-new-cc">
<div class="credit-card-inner">
<h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3>
<img src="images/add-circle.png" alt="Add New Credit Card" id="add-cc-img">
</div>
</div>
When you put a comma between selectors, you are creating a list of different selectors that will execute one rule. This is what you have:
#add-new-cc:hover, #add-cc-img {
background: #F7F7F7;
transition: .5s;
-webkit-transition: .5s;
height: 125px;
width: 125px;
}
Instead, you need a descendant selector to make this work (replace the comma with a space):
#add-new-cc:hover #add-cc-img {
background: #F7F7F7;
transition: .5s;
height: 125px;
width: 125px;
}
.credit-card {
border: 1px solid #CDCDCD;
width: 30%;
height: 250px;
display: inline-block;
margin: 20px 3% 20px 0;
vertical-align: top;
}
.credit-card-inner {
margin: 25px;
}
#add-new-cc {
cursor: pointer;
transition: .5s;
-webkit-transition: .5s;
}
#add-new-cc:hover #add-cc-img {
background: #F7F7F7;
transition: .5s;
height: 125px;
width: 125px;
}
#add-new-cc-title {
font-size: 1.3em;
margin-bottom: 40px;
text-align: center;
}
#add-cc-img {
height: 100px;
width: 100px;
display: block;
margin: 0 auto;
}
<div class="credit-card" id="add-new-cc">
<div class="credit-card-inner">
<h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3>
<img src="http://i.imgur.com/60PVLis.png" alt="Add New Credit Card" id="add-cc-img">
</div>
</div>
Is it possible to adress only the image (id doesn't work because it includes the code between the brackets), to get scaled when hovered? Div + text should stay the same size.
I tried to scale the div + text in the other way round (1/1.1=0.9). But it wobbles, when the mouse leaves the area.
.center {
position: absolute;
}
.scrolldownbutton {
background-color: green;
position: relative; /* absolute um ueber Text zu schweben*/
width: 300px;
height: 300px;
border: 1px solid black;
text-align: center;
line-height: 300px;
transition: all .5s ease;
}
.scrolldownbutton:hover {
transform: scale(1.1);
}
.rahmen {
border: 2px solid yellow;
margin: 5%;
height: 90%;
}
.rahmen:hover {
transition: all .5s ease;
transform: scale(0.9);
}
.text {
margin: -10%;
font-size: 300%;
color: white;
}
#newYork {
background-image: url('http://www.travelersjoy.com/images/planning/destinations/new-york-city/newyork1.jpg');
}
<div class="center">
<div id="newYork" class="scrolldownbutton">
<div class="rahmen">
<p class="text">New York</p>
</div>
</div>
</div>