I am attempting to use a hover effect to transform my second arrow #arrowDown2 to go down to show both arrows. I am wanting the hover to trigger on arrowDownWrap.
What am I doing wrong?
#blue {
width: 100%;
height: 300px;
background: blue;
}
#arrowDownWrap {
position: absolute;
bottom: 120px;
left: 50%;
-webkit-transform: translate(-50%,0);transform: translate(-50%,0);
cursor: pointer;
}
#arrowDownWrapInner {
position: relative;
bottom: 40px;
}
#arrowDown, #arrowDown2 {
border: solid #FFF;
border-width: 0 3px 3px 0;
width: 25px;
height: 25px;
display: block;
padding: 3px;
-webkit-transform: rotate(45deg);transform: rotate(45deg);
position: absolute;
top: 0;
left: 0;
}
#arrowDownWrap:hover #arrowDown2 {
-webkit-transform: rotate(45deg), translate(0, 40px);transform: rotate(45deg), translate(0, 40px);
}
<div id="blue">
<div id="arrowDownWrap">
<div id="arrowDownWrapInner">
<i id="arrowDown"></i>
<i id="arrowDown2"></i>
</div>
</div>
</div>
To specify multiple CSS transform properties, no comma is necessary.
Just list them one after another.
For example:
transform: rotate(45deg) translate(0, 40px);
Working example:
#blue {
position: relative;
width: 100%;
height: 150px;
background: blue;
}
#arrowDownWrap {
position: absolute;
bottom: 100px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
cursor: pointer;
}
#arrowDownWrapInner {
position: relative;
bottom: 20px;
}
#arrowDown,
#arrowDown2 {
border: solid #FFF;
border-width: 0 3px 3px 0;
width: 25px;
height: 25px;
display: block;
padding: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
left: 0;
background-color: red;
}
#arrowDownWrap:hover #arrowDown2 {
-webkit-transform: translate(0, 50px) rotate(45deg);
transform: translate(0, 50px) rotate(45deg);
}
<div id="blue">
<div id="arrowDownWrap">
<div id="arrowDownWrapInner">
<i id="arrowDown"></i>
<i id="arrowDown2"></i>
</div>
</div>
</div>
Related
I'm pretty new to CSS, I wanted to know if it's possible to have some content (an image) on a button on hover. I'll attach an image on how I want it to be. Thank you in advance.
Here's a way to do it:
.btncontain {
position: relative;
width: 200px;
height: 100px;
}
.button {
border: 3px solid aqua;
border-radius: 10%;
width: 100px;
margin: 20px;
padding: 10px;
}
.button:hover{
background-color: aqua;
color: white;
}
.button:before {
content: "Normal";
}
.button:hover:before {
content: "On Hover";
}
.btncenter {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bubble {
width: 30px;
display: none;
z-index: -1;
}
.button:hover .bubble{
display: block;
}
.bubbletop{
position: absolute;
top: 25%;
left: 85%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bubblebottom{
position: absolute;
top: 75%;
left: 15%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="btncontain">
<div class="btncenter">
<button class="button"> <img class="bubble bubbletop"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024">
<img class="bubble bubblebottom"src="https://cdn130.picsart.com/262368078025212.png?r1024x1024"></button>
</div>
</div>
I created a hexagon with css which is working well. Now, I am attempting to create somewhat of an arrow to set under the hexagon. In my attempt, I used the pseudo element, :after to try to position the line after the hexagon. For some reason the line is appearing at the top of the hexagon.
This leads me to the next issue, outside of the placement. How would I create an arrow type line (see illustration below) with :after. Is it even possible?
Is there a better way to do this?
#hexGrid {
width: 60%;
position: absolute;
margin: 0 auto;
padding: 0;
right: 5%;
top: 35%;
}
#hexGrid li {
list-style-type: none;
position: relative;
float: right;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
-o-transform: rotate(-60deg) skewY(30deg);
-moz-transform: rotate(-60deg) skewY(30deg);
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
overflow: hidden;
visibility: hidden;
}
#hexGrid li * {
visibility: visible;
}
#hexGrid li .hexagon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2f2f2f;
-o-transform: skewY(-30deg) rotate(60deg);
-moz-transform: skewY(-30deg) rotate(60deg);
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
overflow: hidden;
}
.hexagon:after {
content: '';
position: relative;
display: block;
margin-top: 10px;
width: 50%;
height: 3px;
background: #b82222;
}
<ul id="hexGrid">
<li>
<div class="hexagon">
</div>
</li>
</ul>
Here is how you would change the size of hexagon:
#container {
margin: 50% auto 0;
width: 300px;
height: 300px;
padding: 2px;
border: 1px solid;
transform: translate( 0, -50%)
}
#container>div {
transform: scale(2) translate(50%, 50%);
}
#chevron {
margin-top: 40%;
position: relative;
text-align: center;
padding: 0;
/* try to add more padding and see the difference*/
margin-bottom: 6px;
height: 5px;
width: 100px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, 28deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -28deg);
}
#hexagon {
width: 100px;
height: 55px;
background: #616161;
position: relative;
margin-top: 50px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #616161;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #616161;
}
<div id="container">
<div id="hexagon"></div>
<div id="chevron"></div>
</div>
SVG will be the best solution for this problem.. But still if you want it with CSS, you can create 3 Hexagons and overlap it at 10px gap.
Snippet below:
#hexGrid {
width: 60%;
position: absolute;
margin: 0 auto;
padding: 0;
right:5%;
top: 35%;
}
#hexGrid li {
list-style-type: none;
position: absolute;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
-o-transform: rotate(-60deg) skewY(30deg);
-moz-transform: rotate(-60deg) skewY(30deg);
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
overflow: hidden;
visibility: hidden;
}
#hexGrid li:nth-child(2){
top:-10px;
}
#hexGrid li:nth-child(2) .hexagon{
background: #fff;
}
#hexGrid li:nth-child(3){
top:-20px;
}
#hexGrid li * {
visibility: visible;
}
#hexGrid li .hexagon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2f2f2f;
-o-transform: skewY(-30deg) rotate(60deg);
-moz-transform: skewY(-30deg) rotate(60deg);
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
overflow: hidden;
}
<ul id="hexGrid">
<li>
<div class="hexagon">
</div>
</li>
<li>
<div class="hexagon white">
</div>
</li>
<li>
<div class="hexagon arrow">
</div>
</li>
</ul>
Again, I would prefer SVG over this solution.
Here's another way of doing that
#chevron {
margin-top: 25px;
position: relative;
text-align: center;
padding: 0; /* try to add more padding and see the difference*/
margin-bottom: 6px;
height: 5px; /* change this to make it bigger */
width: 100px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, 28deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -28deg);
}
#hexagon {
width: 100px;
height: 55px;
background: #616161;
position: relative;
margin-top: 50px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #616161;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #616161;
}
<div id="hexagon"></div>
<div id="chevron"></div>
I have the following code
.heart {
float: left;
margin-top: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
<div class="heart"></div>
However, I need this shape to become a submit button for a form. So I created a button instead with the same class name:
<button type="submit" class="heart"></button>
I'd assume that a button can still just look exactly the same. I've done some reading and noticed i need to have border: none; which I've added, but the shape is still not the same as it was when it was a div.
Remove the default padding and border of the button and you are good to go.
.heart {
float: left;
margin: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
padding: 0; /*added code*/
border: none; /*added code*/
outline:none;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
button.heart:active,
button.heart:active:after,
button.heart:active:before {
background-color: #e80202;
box-shadow: inset 1px 1px 1px #c50b0b;
}
<div class=heart>
</div>
<button type="submit" class="heart"></button>
Note: You can also change the style a little when is clicked by using
:active selector.
The button has default padding applied to it. Remove that in addition to the border:
.heart {
float: left;
margin-top: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
padding: 0;
border: 0;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
The html for this css is simply:
<button type="submit" class="heart"></button><br><br>
<div class=heart>
</div>
I have the following view icon for articles:
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: scale(1.5);
}
<div class="viewIcon"></div>
<br/><br/>
<div class="viewIcon activeArticle"></div>
As you can see the ".activeArticle" rotates the icon around 45 degrees.
Why is this happening? Am I missing something in the pseudo elements?
How can I fix it/How can I scale it without rotation? (transform/rotate will scale the icon back to the original size)
You are resetting your transform when you specify scale for activeArticle - use this:
.activeArticle {
transform: rotate(45deg) scale(1.5);
}
Demo below:
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: rotate(45deg) scale(1.5);
}
<div class="viewIcon"></div>
<br/>
<br/>
<div class="viewIcon activeArticle"></div>
Use rotate() & scale() transform property combined, just like this:
.activeArticle {
transform: scale(1.5) rotate(45deg);
}
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: scale(1.5) rotate(45deg);
}
<div class="viewIcon"></div>
<br/><br/>
<div class="viewIcon activeArticle"></div>
Hope this helps!
I have created this animation but it is not smooth. When you hover over the blue circle, a multicolored circle opens up but the opening is shaky, not 100% smooth. Can the animation be smoothened and how?
#container {
border: 1px solid black;
width: 600px;
height: 600px;
position: relative;
}
#circle {
margin: 0;
padding: 0;
border: 1px solid black;
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
transition: width 0.2s, height 0.2s;
}
#circle a {
margin: 0;
display: block;
padding: 0;
width: 250px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0 0;
}
#circle a:hover {
opacity: 0.5;
cursor: pointer;
}
#trap1 {
background-color: green;
transform: rotate(0deg) skewX(30deg);
}
#trap2 {
background-color: yellow;
transform: rotate(60deg) skewX(30deg);
}
#trap3 {
background-color: red;
transform: rotate(120deg) skewX(30deg);
}
#trap4 {
background-color: blue;
transform: rotate(180deg) skewX(30deg);
}
#trap5 {
background-color: orange;
transform: rotate(240deg) skewX(30deg);
}
#trap6 {
background-color: purple;
transform: rotate(300deg) skewX(30deg);
}
#hide {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: cyan;
}
#circle:hover {
width: 500px;
height: 500px;
}
<div id="container">
<div id="circle">
<div id="hide"></div>
<a id="trap1"></a>
<a id="trap2"></a>
<a id="trap3"></a>
<a id="trap4"></a>
<a id="trap5"></a>
<a id="trap6"></a>
</div>
</div>
Reason: (no links/source to back-up, it is just an educated guess)
I've run into similar a case in the past and what I've managed to find out is that the shake happens due to (I believe) a sub-pixel rendering issue.
When height and width are transitioned, the updates to the element seem to happen pixel by pixel. For example, in the below snippet there are two div elements whose height and width are being transitioned (first one increases by 3px over 5s while second increases by 5px). The key thing to note here is that for the first div there are three visible steps while there are five steps for the second one (meaning they increase pixel by pixel).
div{
display: inline-block;
height: 100px;
width: 100px;
background: red;
border: 1px solid;
margin: 10px;
transition: all 5s linear;
}
div:nth-child(1):hover{
height: 103px;
width: 103px;
}
div:nth-child(2):hover{
height: 105px;
width: 105px;
}
<div></div>
<div></div>
Now you would ask me how does this have any connection with the shake. The connection is that the height and width increase pixel by pixel but the translate(-50%, -50%) means that the no. of px by which to translate the element is sometimes in fractions and it seems like some corrections happen during the actual transition to overcome these fractional values.
Solution: (or a work-around)
Instead of using translate(-50%, -50%) trick for horizontal + vertical centering, if we directly position the element by providing the top and left in pixels, you'd see that there is no shake. Based on my understanding, this is because browsers transition all 4 properties (height, width, top and left) pixel by pixel and hence there are no fractional values that cause the correction.
(Tested on the latest Chrome + Windows 10.)
#container {
border: 1px solid black;
width: 600px;
height: 600px;
position: relative;
}
#circle {
margin: 0;
padding: 0;
border: 1px solid black;
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 275px;
left: 275px;
overflow: hidden;
transition: all 0.2s;
}
#circle a {
margin: 0;
display: block;
padding: 0;
width: 250px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0 0;
}
#circle a:hover {
opacity: 0.5;
cursor: pointer;
}
#trap1 {
background-color: green;
transform: rotate(0deg) skewX(30deg);
}
#trap2 {
background-color: yellow;
transform: rotate(60deg) skewX(30deg);
}
#trap3 {
background-color: red;
transform: rotate(120deg) skewX(30deg);
}
#trap4 {
background-color: blue;
transform: rotate(180deg) skewX(30deg);
}
#trap5 {
background-color: orange;
transform: rotate(240deg) skewX(30deg);
}
#trap6 {
background-color: purple;
transform: rotate(300deg) skewX(30deg);
}
#hide {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: cyan;
}
#circle:hover {
width: 500px;
height: 500px;
left: 50px;
top: 50px;
}
<div id="container">
<div id="circle">
<div id="hide"></div>
<a id="trap1"></a>
<a id="trap2"></a>
<a id="trap3"></a>
<a id="trap4"></a>
<a id="trap5"></a>
<a id="trap6"></a>
</div>
</div>