I tried inserting &:hover into my code but nothing works. This is my code. How can I add hover effects with this code? I guess there's some problem with my scss code but I cannot figure it out.
$(".dropdown").click(function(){
$(this).toggleClass('is-active');
});
.arrow-toggle {
&:before, &:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0;
right: 5px;
}
&:before {
position: absolute;
z-index: 1;
// 50% - half of arrow size - arrow thickness
top: calc(50% - 7px);
border-color: blue transparent transparent;
}
&:after {
border-color: yellow transparent transparent;
position: absolute;
top: calc(50% - 5px);
}
}
.dropdown {
width: 200px;
height: 50px;
background: blue;
position: relative;
#extend .arrow-toggle;
&.is-active {
transform: scaleY(-1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown"></div>
install scss compiler in vscode and first compile the scss to normal css, add the css file to your html.
&:hover {
color:yellow;
}
this snippet should work.
try using :hover pseudo class. You can also checkout this link
Related
I`m trying to make hover effect on a box like this image
I've tried using transparent top and left border but all i got was bottom border extra triangle pointing the other direction like in this
.news:hover {
transform: translateY(20px);
transform: translateX(-20px);
border-left: 20px solid transparent;
border-top: 20px solid transparent;
border-bottom: solid #F4698D 20px;
border-right: solid #F4698D 20px;
}
One solution would be to create a pseudo element using ::after. It sits in the bottom left, overlaying the border, and has it's own gradient background that resembles a triangle.
Because the width of the border is used to determine the height, width, and offset of the overlaying element, I've elected to store that number as a CSS variable.
:root {
--border-width: 10px;
}
div {
padding: 50px;
border-bottom: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;
position: relative;
}
div:hover {
border-color: red;
}
div:hover::after {
content: '';
position: absolute;
display: block;
height: var(--border-width);
width: calc(2 * var(--border-width));
bottom: calc(-1 * var(--border-width));
left: 0px;
background: linear-gradient(to right top, white 50%, red 50%);
z-index: 2;
}
<div>Hover me!</div>
Borders create that shape that resembles a frame.
Another solution for this effect is to use :after and :before pseudo elements. You could let them prepared with opacity: 0, and then when hovering the element, make it to opacity: 1. Like this:
.news {
postision: relative;
}
.news:before { // the bottom line
bottom: -20px;
Left: 0;
height: 20px;
width: 100%;
}
.news:after { // the right line
right: -20px;
top: 0;
height: 100%;
width: 20px;
}
.news:after { // here are properties for both pseudo elements
content: '';
position: absolute;
visibility: hidden;
opacity: 0;
transition: .32s;
}
.news:hover {
transform: translate(-20px, 20px);
}
.news:hover:before, .news:hover:after {
opacity: 1;
visibility: visible;
}
Hope it helps.
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().
Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.
I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/
What would be the best way to make the arrow point down after the button is clicked?
Create a new class for how you want the carat to appear :
#makeGroupButton span.rotate:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(135deg);
}
Note the class addition in the selector.
Then change the javascript/jQuery to just toggle that class:
$('#makeGroupButton').bind('click', function(){
$('#slideout').slideToggle(500);
$(this).children('span').toggleClass('rotate');
});
You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.
Updated fiddle
Have started it for you to build on. Check this out and let me know your feedback. Thanks!
Added the following style:
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
and some js too:
$('#makeGroupButton').bind('click', function(event) {
event.preventDefault();
$('#slideout').slideToggle(500);
$(this).find('span').toggleClass('open');
});
#wrapper{
height: 500px;
width: 300px;
position:relative;
border: 2px solid blue;
}
#slideout {
height: 95%;
width: 95%;
border: 2px solid red;
position: absolute;
bottom: 0;
left: 2.5%;
}
#makeGroupButton
{
clear: both;
text-align: center;
color: white;
width: 220px;
background:black;
overflow: hidden;
transition: all 0.5s;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -20px;
opacity: 0;
width: 15px;
height: 15px;
margin-top: -5px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-bottom: none;
border-left: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
<span>New Group</span>
</a>
I would add a class rotate on click then apply the following css :
#makeGroupButton.rotate span:after {
top: 0px;
-webkit-transform: rotate(-228deg) !important;
}
I have update your js fiddle https://jsfiddle.net/414mwv17/2/.
A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.
Hope this helps
I found this when searching on how to make a sidebar and thought it was good, but it's in JavaScript and I don't want to use JavaScript. So am I able to do this using only CSS and HTML/5?
$('button').toggle(
function() {
$('#B').animate({left: 0})
}, function() {
$('#B').animate({left:200})
})
Here's a snippet of the above example:
$('button').toggle(
function() {
$('#B').animate({left: 0})
}, function() {
$('#B').animate({left:200})
})
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background:orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background:green;
}
#BB {
top: 0px;
left: 0px;
right: 0;
bottom: 0px;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="A"></div>
<div id="B"><button>toggle</button></div>
There's also a way to make this type of navigation feasible by performing a workaround that uses the :checked property of the checkbox input and the General Sibling CSS Selector ~ in order to choose the #A and #B divs and resize them to suit your needs when the checkbox is toggled.
In my example I emulated a toggle button by hiding the actual checkbox and styling the label for the checkbox (the label is also clickable and will trigger the checked attribute in the input element).
The shortcomings in this approach is that in order for the sibling selector to work, you have to actually have the toggle element in the same level as the other elements, which required some extra positioning work.
html,
body {
margin: 0;
padding: 0;
border: 0;
}
a {
display: inline-block;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.5);
border-radius: 0 5px 5px 0;
}
#A,
#B {
position: absolute;
transition: all 500ms;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background: orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background: green;
}
/*Hide the checkbox*/
#toggle {
display: none;
}
label {
position: relative;
/*Set the left position to the same as the sidebar */
left: 200px;
top: 10px;
margin: 5px;
z-index: 2;
transition: all 500ms;
background: #FFF;
padding: 4px 6px;
background: orange;
}
/* Initial sidebar state */
#toggle ~ #A {
left: 0;
}
/*move both containers on toggle*/
#toggle:checked ~ #A,
#toggle:checked ~ #B {
left: -200px;
}
/*move label to follow sidebar animation*/
#toggle:checked,
#toggle:checked ~ label {
left: 0;
background: #FFF;
}
<div id="A"></div>
<input id="toggle" type="checkbox">
<label for="toggle">Toggle</label>
<div id="B"></div>
I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。
Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):
You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.