I have next code: JSFiddle
<div class="wrap">
<div class="item">
<div class="image" style="background-image: url(http://loremflickr.com/800/800)"></div>
</div>
</div>
<style>
.wrap {
width: 500px;
}
.item {
overflow: hidden;
padding-bottom: 100%;
position: relative;
}
.image {
backround-size: cover;
background-position: center center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all .4s ease;
}
.item:hover .image {
transform: scale(1.1)
}
</style>
If you will put mouse on photo, then leave, then put, then leave once again not very fast (waiting while transition finished), sometimes image is twitches. Looks like trnasition sometimes not working.
Does anybody knows, what is the problem of it?
You have a syntax in your code error:
backround-size: cover;
----^
this causes a positioning twitches
Related
I am working on an angular application and implemented spinner using CSS.
Now the spinner working as expected.
I have added a background image inside the CSS using background-image:url()
Here, the problem is image also rotate with the spinner.
Here is my CSS
#spinner {
-webkit-animation: frames 1s infinite linear;
animation: frames 1s infinite linear;
background: transparent;
border: .3vw solid #FFF;
border-radius: 100%;
border-top-color: #250463;
background-image:url("../../../../assets/images/svg/img.svg") ;
width: 5vw;
height: 5vw;
opacity: .6;
padding: 0;
position: absolute;
z-index: 999;
justify-content: center;
align-items: center;
}
#keyframes frames {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.spinner-wrapper {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 998;
}
html code
<div *ngIf="isLoading" class="spinner-wrapper">
<div fxLayoutAlign="center center" id="spinner">
</div>
</div>
Experiment 1
added another style img
img {
max-width: 5vw;
position: absolute;
max-height: 5vw;
top: 0;
height: 5vw;
width: 5vw;
clip-path: circle(45% at 50% 49%);
}
i have updated my html code as well
<div *ngIf="isLoading" class="spinner-wrapper">
<div fxLayoutAlign="center center" id="spinner">
</div>
<img src="">
</div>
Experiment 2
added background-attachment: fixed; inside spinner.Still the image is rotating
**Experiment 3 **
I made below changes.now its working
added new css
z-index: 8;
justify-content: center;
top:230px;
left: 575px;
.img {
position: absolute;
top: 0;
width: 42px;
height: 48px;
}
html changes
<div *ngIf="isLoading" class="spinner-wrapper">
<div fxLayoutAlign="center center" id="spinner">
</div>
<img src="../../../../assets/images/svg/img.svg">
</div>
One draw back is here.if i change the screen size,spinner and image appears different position
how can i solve this
Now the image showing some where else in the UI.
how can i include image inside the spinner.
How can i stop spinning my image?
Can we set image size
This is my first experience on CSS.If anything wrong please correct me.
If I construct an image from 5 different pieces (for creating an effect), one simple method is to create 5 different classes with the same styling (I'm using react). The effect I would like to achieve is rotating each of the 5 parts of the image on hover. Here is the jsx:
var sectionStyle = {
width: '100%',
height: '100%',
backfaceVisibility: 'hidden',
backgroundImage: 'url(' + background + ')',
backgroundSize: 'cover',
};
return(
<div className="container1">
<div className="thumb-details"></div>
<div className="part p01">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
<div className="part p02">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
<div className="part p03">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
<div className="part p04">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
<div className="part p05">
<figure className="f1" style={sectionStyle}/>
<div className="f2"></div>
</div>
</div>
Then I can manually calculate the background-position of each figure class so that each figure image will start from where the previous ended:
.thumbnail {
width: 100%;
height: 20vw;
}
.container1 {
width: 20vw;
height: 20vw;
position: absolute;
/* background-color: blue; */
}
.thumb-details {
max-width: 100%;
height: 20vw;
background-color: yellow;
position: absolute;
left:0;
right:0;
transition: opacity .2s ease-out;
}
.part {
width: 20%;
height: 100%;
position: absolute;
transform: rotateY(0deg);
transform-style:preserve-3d;
transition: all .5s ease-out;
}
.f1 {
transform: rotateY(0deg);
}
.p01 {
left: 0;
}
.p01 figure {
background-position: 0px 0px;
}
.p02 {
left: 20%;
}
.p02 figure {
background-position: -4vw 0px;
}
.p03 {
left: 40%;
}
.p03 figure {
background-position: -8vw 0px;
}
.p04 {
left: 60%;
}
.p04 figure {
background-position: -12vw 0px;
}
.p05 {
left: 80%;
}
.p05 figure {
background-position: -16vw 0px;
}
.container1:hover .part {
transform: rotateY(180deg);
}
It's just 20vw divded by 5, and then I set the background-position of each one (starting from the second) to start where the previous one ended.
This is working fine.
Problem is - the image is not centered, I can't set its total width and height, because if I use "background-position: center", as I would like to, then I cannot track each part of the image anymore.
I hope it doesn't sound complicated. What I theoretically need is to calculate different offsets of the image (5 different offsets as I showed in the CSS) but to calculate it from the image after it's positioned to be centered. It's important because I want the image to be responsive.
Is it possible?
Thanks in advance
I am attempting to create a front end screen, where there are images labeled step 1-4 next to each other the idea is that if the user hovers over one of these step that on the div below them the the relevant and corresponding image should fade in, and when they remove their cursor or move it to another step the image should fade out or be replaced by another image respectively. thus far I have been able to add in coding as to have the step 1 - 4 images being replaced by their correct images, but i am dumbfounded on how to get the transition effects happen on a completely different div. The code (HTML and CSS) I am using is included below.
HTML:
<div class="col-md-3">
<div class="swap-1" id="step1">
<a>
<img src="~/images/step1-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-2" id="step2">
<a>
<img src="~/images/step2-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-3" id="step3">
<a>
<img src="~/images/step3-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-4" id="step4">
<a>
<img src="~/images/step4-cover.png" />
</a>
</div>
</div>
#*the div below is where the corresponding images should appear*#
<div id="steps" class="steps" style="height:300px; width:1000px;
margin-bottom:30px; margin-top:100px"></div>
CSS:
.swap-1 {
background-image: url(../images/step1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-1 a {
display: block;
}
.swap-1 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-1 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-2 {
background-image: url(../images/step2.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-2 a {
display: block;
}
.swap-2 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-2 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-3 {
background-image: url(../images/step3.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-3 a {
display: block;
}
.swap-3 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-3 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-4 {
background-image: url(../images/step4.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-4 a {
display: block;
}
.swap-4 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-4 a:hover
img {
opacity: 0;
transition: all .6s ease-in;
}
If you are not limited to that specific HTML, you can do it way simpler...
simply put each 'slide' (.image) next to its 'tab' (.step) and you can access it with CSS using the '+' (next element) selector, like:
.step:hover + .image{ /* active slide css here */ }
Please check the code in the fiddle: https://jsfiddle.net/ck0bqy1h/
I have two divs that have an opacity less than 1. When hovering I would like to increase the opacity to 1 but can't seem to get it to work. Not sure if it is because of the z-index I have in the css. I need the z-index to prevent the whole div having reduced opacity.
This is the html
<section class="events">
<div class="events-wrapper">
<h2>Select the session you would like to attend for more information</h2>
<div class="melbourne-left">
<div class="melbourne-left-background">
<h1>Melbourne</h1>
<h3>Sunday Jan 21st 2015</h3>
</div>
</div>
<div class="sydney-right">
<div class="sydney-right-background">
<h1>Sydney</h1>
<h3>Sunday Feb 1st 2015</h3>
</div>
</div>
</div>
</section>
And this is the css for the 'melbourne' divs
.melbourne-left {
display: block;
float: left;
width: 44%;
clear: both;
margin-left: 5%
}
.melbourne-left-background {
position: relative;
z-index: 1;
min-height: 420px;
}
.melbourne-left-background::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://melbourne.jpg) center center;
opacity: .4;
width: 100%;
max-width: 855px;
background-repeat: no-repeat;
}
.melbourne-left-background:hover {
opacity: 1.0;
}
You are setting the opacity on the :before psuedo element of .melbourne-left-background, however you are detecting the :hover state and changing opacity for the DOM element and not the psuedo.
As such, change:
.melbourne-left-background:hover {
opacity: 1.0;
}
To
.melbourne-left-background:hover::before {
opacity: 1.0;
}
I have the css transition working when the user hovers over item however when the mouse exits the div, content is pushed below during the transition. Below is my html/css along with a jsfiddle to show what I mean.
html:
<div id="container">
<div class="item">
<div class="img">
</div>
<div class="heading">
</div>
</div>
</div>
css:
#container {
width: 100%;
height: 100%;
}
.item {
width: 100%;
height: 400px;
position: relative;
}
.img {
background: #000;
width: 40%;
height: 400px;
float: left;
transition: width 0.5s ease;
}
.heading {
width: 60%;
height: 400px;
float: right;
background: #900;
transition: width 0.5s ease;
}
.item:hover .img {
width: 100%;
}
.item:hover .heading {
width: 100%;
background:rgba(255,255,255, 0.9);
position: absolute;
top:0;
left:0;
}
JSFiddle
I am sure it is a simple position problem. However, I am not familiar enough with the transition to know where to find the answer.
Updated position to
tranform: translateY(-100%);
in order to get rid of the non-transition property. Now before/after :hover the div heading gets pushed below item. Updated JSFiddle to show.
Updated transition: all to transition: width on both img and heading which fixed heading getting pushed below img on :hover, however the original problem of heading being pushed below when user exits :hover is still an issue.
I think I found the answer:
by making heading have position:absolute;, I can have it forced to stay inside of the item div, keeping it from moving below it. So my updated css (with actual class names and production stuff) looks like;
.flight {
height: 400px;
position: relative;
}
.flight-img {
background: red;
background-size: cover;
width: 40%;
height: 400px;
float: left;
position: relative;
/* CSS Animation Effects */
transition: width 0.5s ease;
}
.flight-heading {
width: 60%;
float: left;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: width 0.5s ease;
}
/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
float: right;
}
/* Adding hover effects for desktop */
.flight:hover .flight-img {
width: 100%;
}
.flight:hover .flight-heading {
width: 100%;
position:absolute;
top:0;
left:0;
transform: translateY(50%);
background: rgba(0,0,0,0.75);
color: #fff;
h2 {
color: #fff;
}
}
while my html looks like:
<div id="flights">
<div class="flight">
<div class="flight-img"></div>
<div class="flight-heading">
<h2>Shared Flights</h2>
<p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
<button>Book Now</button>
</div>
</div>
<div class="clear"></div>
</div><!-- End Flights -->
with a JSFiddle to show. I know the animation needs work, but I figure making it smooth will be easy now that the divs stay in one place.