My CSS Gallery specifications are not corresponding to my HTML5. The images are not following the hover tag and they are displaying on top of everything else. It will not stay fixed however when I change the positioning to fixed it disappear all together. CSS checker states validates all fine. I can not position it where I want on the page either. Any help would be appreciated. Thanks in advance
CSS CODE
#gallery {
bottom: -20px;
padding-right: 50px;
display: inline;
top: 200px;
z-index: 99999999;
}
#gallery ul {
list-style-type: none;
padding: 20px;
text-align: center;
position: fixed;
}
#gallery li {
display: inline;
padding-right: 20px;
}
#gallery img {
padding: 5px 5px 40px 5px;
background: white;
box-shadow: 4px 4px 8px -4px #000000;
-webkit-box-shadow: 4px 4px 8px -4px #000000;
-mox-box-shadow:4px 4px 8px -4px #000000;
}
#gallery:hover {
-webkit-transform:scale(5%);
-o-transform:scale(5%);
-moz-transform:scale(5%);
-ms-transform: scale(5%);
transform: scale(5%);
transition: 0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
-mox-transition:0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
}
Related
I've got a search box which transitions and gets bigger when clicked on, and there is a button beside it. My problem is that the input box moves softly but the button stays in place and then teleports to its position once the transition is over. How can I trigger a transition on the button once the input box is clicked?
.searchbox {
width: 150px;
height: 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-position: 2px 2px;
background-repeat: no-repeat;
padding: 12px 20px 12px 45px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-top:10px;
}
.searchbox:focus {
width: 100%;
}
.searchbt {
float: left;
width: 15px;
height: 4px;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border:none;
margin-top:10px;
border-radius: 4px;
position:absolute;
z-index:1;
border: 2px solid #ccc;
border-right:none;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.searchbt:focus {
width=100%;
}
Thanks for your help in advance.
Edit: I temporarily fixed it by moving the button to the other side (The one which doesn't move)
I have a very small container which has a custom dropdown element inside of it.
#main {
height: 90px;
width: 400px;
overflow-y: auto;
}
.wrapper-dropdown {
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
position: relative;
width: 200px;
padding: 12px 15px;
background: #fff;
border-radius: 6px;
border: 1px solid #d9e2f6;
cursor: pointer;
outline: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.wrapper-dropdown .dropdown {
position: absolute;
top: 100%;
left: -1px;
right: -1px;
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid #d9e2f6;
border-top: none;
border-bottom: none;
list-style: none;
padding: 0 5px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
max-height: 0;
overflow: hidden;
margin: 0;
z-index: 5;
}
.wrapper-dropdown .dropdown li {
padding: 0 10px;
width: 100%;
}
.wrapper-dropdown .dropdown li a {
display: block;
text-decoration: none;
color: #6a759e;
padding: 15px 0;
transition: all .3s ease-out;
border-bottom: 1px solid #d9e2f6;
margin-right: 20px;
}
.wrapper-dropdown.active .dropdown {
-webkit-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
-moz-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
max-height: 400px;
}
<div id="main">
CLICK OPTION 1 TO SHOW LIST
<div class="wrapper-dropdown">
<span class="selectedtext">Option1</span>
<ul class="dropdown">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
</div>
I'm trying to get the absolute positioned element (which is the list of options) to appear outside of the bounds of the main container which has overflow-y set.
I understand why this happening this due to this answer.
But am simply asking if anyone has any insights/tips/suggestions on a way to get around this or if it's generally not possible without moving the dropdown items outside of the container with the overflow set.
My example is here
I need to create button like this
You can see a rounded borders on center of sides. I'm tried to do it with after and before classes, but it was tricky. Which solution is the cleanest? Also I'm done on dev resizeble button and it'll be better if this can be done as one figure, without absolute positioning or smth like that
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
button {
text-transform: uppercase;
background-color: #F9EFCA;
border: none;
padding: 20px 100px;
cursor: pointer;
letter-spacing: 1px;
border-bottom: 10px solid #ae9e5c !important;
box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, .12), 0 10px 20px -5px rgba(0, 0, 0, .25);
font-size: 50px;
transition: .2s all;
position: relative;
border-radius: 10px;
}
button:hover,
button:active {
transition: .2s all;
border-bottom: none !important;
}
button:before,
button:after {
content: '';
position: absolute;
top: 9%;
bottom: 0;
height: 91%;
background: #F9EFCA;
width: 10px;
border-radius: 100%;
}
button:before {
left: -4px;
}
button:after {
right: -4px;
}
button:active:before,
button:active:after,
button:hover:before,
button:hover:after {
top: 9%;
bottom: 0;
height: 82%;
}
<button>Call me</button>
Codepen example
create a new button class and try this in your CSS:
.button_costum
{
margin: 10px auto;
font-size: 2.0rem;
padding: 1.25rem 2.5rem;
display: block;
background-color: // choose what you want
border: 1px solid transparent;
color: // choose what you want
font-weight: 300;
-webkit-border-radius: 3px;
border-radius: 20px; // in your case it shout be 25 or 30
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
try using the property on button
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
This would help you target the button corners without distorting the shape of the button itself.
When I hover over the corner of the element I am getting a weird constant hover and hover out effect, how can I fix this?
HTML
<h2>
HELLO
</h2>
CSS
h2 {
position: absolute;
background: rgba(2,35,64,0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
display: block;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2,35,64,0);
padding: 20px;
margin: 0px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
h2.woocommerce-loop-category__title:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
http://jsfiddle.net/xc7vjstn/1/
change the background from transparent to what ever color you want and you will see the content plus if you want to keep it online like small box then margin and padding is what you need to play with.
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: blue;
}
The margin in h2:hover is causing the behavior removing the margin fixed the problem
h2:hover {
border: solid 5px #FFF;
padding: 10px;
/*margin: 25px; */
background: transparent;
}
Here is my solution, please check the live example below:
h2 {
position: absolute;
background: rgba(2, 35, 64, 0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2, 35, 64, 0);
padding: 20px;
margin: 0 auto;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
background: transparent;
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
<h2>
HELLO
</h2>
I have a tab that when I hover over it, I open a dropdown-menu. What I would like is that when I hover over the tab, the dropdown menu will show with an transition of 0.5s to give that animation look.
To be open from top to bottom. Something similar you can see in dropdown on linkedIn page.
This is what I have so far.
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
width: 211px;
border-color: #efefef;
border-width: 3px;
background-clip: padding-box;
background-color: #ffffff;
border-radius: 0 0 7px 7px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: none;
float: left;
font-size: 12px;
left: 0;
list-style: outside none none;
margin: 0px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
I try add this into the dropdown:hover and dropdown-menu without success.
-o-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
Add opacity: 0; to .dropdown and opacity: 1; to .dropdown-menu
Here is a demo