I have a css transition who is perfectly working on hover but if we un-hover it at the end of the animation, at the left side of the button there is a piece of the :after who overflows the button. It looks like the animation is coming back to a square form without border-radius
Fiddle of my button: Fiddle
use overflow: hidden; in .loginBut
Related
I am working on a website where one of the sessions has a click effect. Basically the text body is hidden and when clicking on it expands showing the hidden text as you can see in the image:
Before Click
After Click
In CSS, basically the text element has a height of 30px and after: hover it has 300px.
.portfolio_text{
height:30px;
}
#ho_nf:hover .portfolio_text {
height: 200px;
padding: 20px 14px;
overflow: visible;
}
Portfolio_text returns to normal height if I click outside the element's Div or click on another element in the list of 6.
What I need is to be able to return the text to the size of 30 by clicking on the close icon that I added in the left corner to see the background image again.
I tried with JQuery but it didn't work and I need it only on mobile because the Desktop is based on: hover and removing the mouse it goes back to the normal state.
There is no :hover pseudo-element for mobile since there is no cursor.
Try using :active.
I want to make a blur effect in the background of a navbar component.
If I use a normal blur effect that exist on CSS core, it will not work like I want, so I want some help with this.
Examples:
Onthe first image, the panel section on the bottom has some "transparent background", but it is not opacity.
On the right side there is a navbar with that blur effect.
I tried to use CSS blur effect but it makes the menu items not readable.
It's done by a mix of setting opacity to the background color, and adding a blur filter.
For the example below, take a look at background:rgba(0,0,0,.7) and backdrop-filter: blur(5px).
For background color, you must use RBGA instead of hex. Adjust the .7 at the end to customize opacity. Similarly with blur filter, adjust the (5px) for intensity of blur.
.navbar {
background:rgba(0,0,0,.7);
backdrop-filter: blur(5px);
color:#fff;position:fixed;height:300px;width:500px}
img {position:fixed}
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<div class="navbar">
transparent black background
</div>
I have a primary image with a secondoary image of an arrow on top, where the arrow is inserted by using a pseudo after-element.
Now I would like to change the opacity of the primary image when hovering over it. This works fine, until someone hovers the arrow image on top - then it doesn't. How can I place a hover style on the secondary arrow image, which changes opacity of the primary image?
Thanks!
Try applying this css to your pseudo after-element:
pointer-events:none
You can add a wrapper, and to make hover for it, like this:
<div class='wrap'>
<div class='img'></div>
</div>
And, add style like this:
.wrap:hover + .img {
}
JFIDDLE DEMO
As you can see on the jsfiddle link, I have a button with tooltip display on mouse hover. The problem is that tooltip area isn't overlaying the parent div and will display only inside the div.
I know that if I remove .panel-heading {
overflow:hidden;
} this will work but I need this css to stay for some of the responsive issues. I have tried adding .toolt {
overflow:visible;
} to tooltip div but it won't work.
You can change container of tooltip
$('.toolt span').tooltip({container:'body'});
I'm trying to get the bottom blue border to disappear on :active. The persistant border is tied to the background div but it's not going away when the hyperlink is active even though the hyperlink has no bottom border.
Here is a fiddle of the project:
http://jsfiddle.net/ajrdesign/cTKnn/5/
Anyone know why this background div is appearing above the other elements?
Figured it out. I had added border to the ul li element and not the li element. So the :hover and :active were simple adding another border on top of that one. Changed that and it worked great!
http://jsfiddle.net/ajrdesign/HgnwG/