hover is not working on my image. I honestly do not know why. Image is in a div class called portfolio as seen by code below
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img{
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1),
opacity 250ms linear;
}
.portfolio__img:hover {
transform: scale(2);
opacity: .75;
}
The hover is being carried out on (portfolio__img).
The class of the div is (portfolio__item).
That is the problem.
Try replacing class name with portfolio__img
You have a few mis-types in your CSS:
There should be no space between the colon and hover-- it is a pseudo-selector written as :hover:
(I removed the line regarding the colon after opacity because I misread it, thanks to #pete for the correction.
.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img:hover { /* no space here between : and hover */
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1),
opacity 250ms linear;
}
.portfolio__img:hover { /* no space here between : and hover */
transform: scale(2);
opacity: .75;
}
Also, as #bouh points out in the comments, there is no element with the class .portfolio__img in your mark-up, so no elements will be matched by this selector.
If we combine these two things we should have a working example:
.portfolio__item {
background: var(--clr-accent);
}
.portfolio__img:hover {
transition: transform 750ms cubic-bezier(0.5, 0, 0.5, 1), opacity 250ms linear;
}
.portfolio__img:hover {
transform: scale(2);
opacity: .75;
}
<div class="portfolio">
<a href="#" class="portfolio__item">
<p class="portfolio__img" src="../imagefolder/me.jpeg" alt="me">test test test</p>
</a>
</div>
Related
i have this code and the image goes up with with the transition but I would like to came back with the transition down when my mouse goes somewhere else
my actually code;
.yt:hover {
transform: translateY(-30px);
transition-duration: 2s;
}
.yt {
transition: 2s;
}
.yt:hover {
transform: translateY(-30px);
}
Move the transition attribute to the whole object
img{
transition: all 2s;
}
img:hover {
transform: translateY(-30px);
}
<img src="some_src.jpg" />
I'm very new to web dev right now, and I'm currently trying to make an image fade into color upon hovering over it. This is what I've got right now:
html:
<body>
<img src=imgmonochrome.jpg id=img1>
</body>
css:
#img1 {
position: top right;
height:49%;
width:49%;
transition: content 0.5s ease;
}
#img1:hover {
transition: content 0.5s;
content: url('imgcolor.jpg');
}
The image will switch, but will not fade in.
I've looked all over for answers on this, but I can't find any that use just HTML and CSS (cause I'm illiterate in javascript/jQuery ((but going to learn very soon for this very reason)))
Help would be appreciated.
YES, this is possible... But not in the traditional sense.
In order to accomplish this, you'll need to forgo <img />, and instead make use of two images presented with content: url() in :before and :after pseudo-classes. Set the :before to be your starting image, and :after to be your target image. Then set the opacity of :after to 0 by default, and set the two pseudo-elements to sit on top of one another. Finally, set a :hover rule for both :before and :after which toggles their opacity, and use transition: opacity to control the fade.
This can be seen in the following:
* {
margin: 0;
}
.image:before {
content: url("https://via.placeholder.com/150/FF0000/00FFFF");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
.image:after {
position: absolute;
left: 0;
opacity: 0;
content: url("https://via.placeholder.com/150/00FFFF/FF0000");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
.image:hover:after {
opacity: 1;
}
.image:hover:before {
opacity: 0;
}
<div class="image"></div>
Remove content from the transition and use img tag to set image
<img src="imgmonochrome.jpg" id="img1">
#img1 {
position: top right;
height:49%;
width:49%;
transition: 0.5s ease;
}
#img1:hover {
opacity: 0.3;
background: url(imgcolor.jpg);
}
Alternatively,
<img src="imgcolor.jpg" id="img1">
#img1 {
filter: gray;
-webkit-filter: grayscale(1);
-webkit-transition: all .5s ease-in-out;
}
#img1:hover {
filter: none;
-webkit-filter: grayscale(0);
}
I'm trying to make a button which, on hover, will go up 5px.
It works fine with transitions. But the problem is that, when I hover my mouse on the lower part of the button, as soon as I move the mouse (I'm guessing it checks :hover on mouse update, but I'm new to CSS...), since the button has gone up, it realizes it no longer hovers, so it snaps back into position, and it ends up flickering.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
How can I prevent this behavior? Only possible solution I've found is to use display: inline-block, but it doesn't seem to make any difference.
Also, I've tried using a container div, but it still does the same thing.
Seems to work OK with a container, if you monitor :hover on the container, then transform the button. And you only need to define transition and transform once each.
.btn {
display: inline-block;
transition: transform 50ms ease;
}
div:hover .btn {
transform: translate(0px, -5px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<button class="ui button btn"> That rocks!</button>
</div>
Put the button into a container, and make it so when you hover over the container it changes the child button:
.container:hover .btn {
transform: translate(0px,-5px);
}
If you set the hover event on the container it should work.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
div {
transition: transform 50ms ease ;
background: pink;
}
div:hover .btn {
transition: transform 50ms ease ;
transform: translate(0px,-5px);
}
<div>
<button class="ui button btn"> That rocks!</button>
</div>
When hovering, add an ::after pseudoelement with these styles:
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
It will keep the focus on the button.
Snippet:
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease;
}
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
I'm working on making a sidebar on My main page something like google ventures (https://www.gv.com/lib/how-to-choose-the-right-ux-metrics-for-your-product). but the problem I'm getting is when I click to any menu item in the sidebar , the side bar gets collapse but the text for menu item is still there. I want to keep the sidebar open till the mouse cursor is in the sidebar area (even when user clicks on any menu it should remain opened/expended) but it gets collapse on cliking on any item while the text for the menu item remain in the air. I don't know how to fix it as Im not much hands-on with css and designing.
here is my jquery code for adding classes for collapse/expand the side bar
$('[data-toggle="offcanvas"]').mouseenter(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse');
$("body").addClass('sidebar-open')
}
});
$('[data-toggle="offcanvas"]').mouseleave(function(e) {
e.preventDefault();
if ($("body").hasClass('sidebar-open')) {
$("body").removeClass('sidebar-open');
$("body").addClass('sidebar-collapse')
};
});
and here are css classes (with media queries) for this
.main-sidebar,
.left-side {
position: absolute;
top: 0px;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 0;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}
#media (max-width: 767px) {
.main-sidebar,
.left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (min-width: 768px) {
.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}
#media (max-width: 767px) {
.sidebar-open .main-sidebar,
.sidebar-open .left-side {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.sidebar {
padding-bottom: 10px;
}
and here is html code where my sidebar resides
<aside class="main-sidebar" data-toggle="offcanvas">
<section class="sidebar">
<ul class="sidebar-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</section>
<aside>
I tried to implement it on mouseclick event by keeping adding the sidebar-open class but this didn't work. Any help would be highly appreciated. Thanks
You can put the text in an element like, say p's. Then you can you try hiding the them when mouse leaves and show them when mouse enters. You can add the lines similar to the below ones in your jquery.
// on mouse leave
$('ul.sidebar-menu li>p').hide();
// on mouse enter
$('ul.sidebar-menu li>p').show();
Edit ---
Alternatively you can try the below CSS for aside.main-sidebar,
white-space: nowrap;
overflow: hidden;
I cannot seem to animate ng-cloak. Essentially, I'm trying to animate a div from .containter.ng-cloak to .container.ng-binding
But it doesn't seem to workâAngular loads the div with container ng-binding classes straight away, ignoring the transition rule.
I even tried using transition-delay set to a couple seconds, no dice.
HTML
<div class="container ng-cloak" ng-controller="AppCtrl">
CSS
.container.ng-cloak,
.container.ng-binding {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.container.ng-binding {
opacity: 1;
}
Worth noting:
transitioning background-color from blue to red seemed to work as expected.
I omitted vendor-prefixes for the sake of brevity.
Thanks in advance.
A different approach:
http://jsfiddle.net/coma/UxcxP/2/
HTML
<section ng-app>
<div ng-class="{foo:true}"></div>
</section>
CSS
div {
width: 100px;
height: 100px;
background-color: red;
opacity: 0;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
div.foo {
opacity: 1;
}
This will work like cloak since Angular won't set the foo class until is loaded.
The cloak won't work as you want because it'll be there (as a class, attribute, element...) until Angular replace it with the result of its templating process, so it isn't the same node and that's why it won't get the transition (a transition occurs when the same element changes), is not changing, is just not the same node.
Take a look at this:
http://jsfiddle.net/coma/UxcxP/5/
As you can see in that example, the div next to the one being "angularized" is getting the fade animation because it's the same div even before Angular taking place.
I realize there's been an accepted answer; however this is doable with the ng-cloak directive as originally attempted.
I use it to animate Jade generated markup. Your Mileage May Vary with Angular runtime-templated markup.
http://codepen.io/simshanith/pen/mqCad
HTML
<div class="container ng-cloak fade-ng-cloak" ng-controller="AppCtrl">
CSS
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
.fade-ng-cloak {
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.fade-ng-cloak[ng-cloak] {
display: block !important;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.fade-ng-cloak.ng-cloak,
.fade-ng-cloak.ng-binding {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.fade-ng-cloak.ng-binding {
opacity: 1;
}
A pure CSS solution without adding extra-classes to the HTML:
HTML
<div ng-cloak>{{myProperty}}</div>
CSS
[ng-cloak] {
display: block !important;
opacity: 0;
}
[ng-cloak],
.ng-binding {
transition: opacity 300ms ease-in-out;
}
.ng-binding {
opacity: 1;
}
My solution is similar to some of the others, but my use case required that I use cloak on a div that angular doesn't bind to, so this is what I ended up doing...
(browser prefixes omitted for brevity)
CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
display: none !important;
}
.fade-ng-cloak {
display: block !important;
opacity: 1;
transition: opacity 0.5s;
}
.fade-ng-cloak.ng-cloak {
opacity: 0;
}
HTML
<div class="row ng-cloak fade-ng-cloak">
<div class="col-xs-12">
<uib-accordion close-others="true">
...
</uib-accordion>
</div>
</div>