I'm looking for a solution to add a fadein and fadeout effect to this line of code:
<img src="images/1.jpg" onmouseover="this.src='images/2.jpg'"
onmouseout="this.src='images/1.jpg'" alt="fade_me" />
Does anyone have any simple solutions without this becoming too complex? Thanks!
Well, I don't know about complexity, but this works pretty well.
http://jsfiddle.net/8KFT8/1/
<style>
.container {
position: relative;
}
.container img {
position: absolute;
transition: opacity .5s ease;
}
.container img:hover {
opacity: 0;
}
</style>
<div class="container">
<img src="images/2.jpg"/>
<img src="images/1.jpg"/>
</div>
Related
I'm trying to add a transition between pages in a SvelteKit application. When navigating, the current page should fade out, and the new page should then fade in in its place. To accomplish this, in +layout.svelte, I wrapped the <slot> in a div with the in and out transitions set. I wrapped this all in {#key $page.url.pathname} so that the animations are triggered when navigating from page to page. However, my current code produces this effect:
When navigating, the content of the page updates before fading out. In other words, the destination page immediately appears, then fades out, then fades back in. At the same time, though, content in +layout.svelte (.title, at the top of the page) behaves correctly; just the content within the <slot> is bugged.
Here is the code:
+layout.svelte
<script lang="ts">
import '$lib/style.css';
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
</script>
<div class="page">
<div class="bar">
Sidebar
Page 1
Page 2
</div>
<div class="content-wrapper">
{#key $page.url.pathname}
<div class="content" in:fade={{ delay: 1000, duration: 1000 }} out:fade={{ duration: 1000 }}>
<div class="title">
{$page.url.pathname}
</div>
<slot />
</div>
{/key}
</div>
</div>
<style global>
.page {
display: flex;
flex-direction: row;
box-sizing: border-box;
width: 100vw;
min-height: 100vh;
}
.bar {
display: flex;
flex-direction: column;
width: 300px;
color: white;
background: black;
}
a {
color: white;
}
.content-wrapper {
flex-grow: 1;
width: 100%;
min-height: 100vh;
}
.content {
width: 100%;
height: 100%;
}
.title {
font-size: 2em;
}
</style>
+page.svelte
<div class="page">
<div class="title">Page 1</div>
</div>
<style>
.page {
width: 100%;
height: 100%;
background: blue;
}
</style>
page2/+page.svelte
<div class="page">
<div class="title">Page 2</div>
</div>
<style>
.page {
width: 100%;
height: 100%;
background: red;
}
</style>
Is there a way to get the <slot> content to wait for the out animation to finish before updating?
Its an issue with the lifecycle of the transitions for in and out.
I usually use in:fade ONLY on elements and it looks okay. It seems using both means that while one element is going out, another is coming in at the same time in which looks funny.
Perhaps you could find out more about delay in transitions and let us know..
Happy coding☺️
I have one question about css. Here is example.
html:
<div class="image"></div>
css:
.image {
width: 250px;
height: 250px;
background-image: url(image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image:hover {
background-size: 120% 120%;
}
So In this example everything working fine. When I hover on image, image is zoomed. However I have a lot of images like this and it's not good for SEO to use for every image div, and I want to use < img > tag but there isn't such thing like "background-size". Is there any way to do so with img?
Try This:
.image {
width: 250px;
height: 250px;
margin: 100px;
}
.image:hover {
transform: scale(1.5);
}
<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
Please try this. I have done by scale property.
.image{
display:inline-block;
width:200px;
height:200px;
}
.image img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
-webkit-transition:0.5s;
transition:0.5s;
}
.image:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
Hope this snippet helps you.
.image{
display:inline-block;
width:250px;
height:250px;
overflow: hidden;
}
.image img{
width:100%;
height:100%;
transition:all 0.5s ease;
}
.image:hover img {
transform:scale(1.2);
}
<div class="image">
<img src="https://dummyimage.com/250x250/000/fff" alt="" />
</div>
I don't really get what you want to achieve but in your code
<div class="image"></div>
is equivalent in display to
<div><img class="image" /></div>
I'm trying to get a CSS-only solution for a cut-off bottom right corner on every image in a page.
So far, I have come up with this:
img::after {
content: url(/images/whitecorner.png);
height: 20px;
width: 20px;
display: inline-block;
float: right;
}
But the doesn't appear in the document anywhere. (I'm using the Chrome inspector).
I hope someone can point me in the right direction. Thanks in advance!
Example
You can not use ::after with img.
Same with inputs, this is because they are self closing (/>) and hold no content.
What you could do is something like this:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
and then use
.cut-image::after{
/*styles*/
}
In my example I used:
HTML:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
CSS:
.cut-image{
position:relative;
float:left;
margin:0 5px;
overflow:hidden;
}
.cut-image::after {
content: '';
position:absolute;
bottom:0;
right:0;
height: 0px;
width: 0px;
border-left:40px solid transparent;
border-top:40px solid transparent;
border-bottom:40px solid white;
border-right:40px solid white;
}
img is an inline element and :before or :after won't work , you'll have to wrap the img with a div
this is probably what you need:
http://jsfiddle.net/h7Xb5/1/
this is the css:
div {
width:300px;
height:300px
}
div:hover:before {
content:"";
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
background:url(http://www.linobanfi.it/immagini/lino_banfi_3.jpg) no-repeat center center;
}
I have this img:
<img src="img1.png" alt="" />
and this CSS:
img{
background-color:green;
opacity:0.4;
padding:5px;
}
you can see here that img's background-color also faded. How can I give opacity only to img and not to its background?
Fiddle
You need another surrounding HTML element to achieve this effect.
HTML:
<div class="wrapper">
<img src="http://i.stack.imgur.com/hUOmz.jpg" alt="" />
</div>
CSS:
img {
opacity: 0.4;
padding: 5px;
}
.wrapper {
font-size: 0;
display: inline-block;
background-color: green;
}
Setting display to inline-block wraps the img, without specifying any size.
I am trying to make circle divs with image links inside, the images are half the opacity and when hovered over they turn to full opacity (I'm doing that using jQuery). They work exactly how I want them to in Chrome, Firefox and IE, but they're acting really funny in Opera and Safari.
Here's a webdevout for the page:
http://www.webdevout.net/test?06
Here's the code that I have:
<div class="cSpan">
<h2 style="text-align: center;">Piercings</h2>
<div class="circle">
<img src="images/img03.png">
</div>
<p> view more </p>
</div>
and style
.cSpan {
display: inline-block;
width: 280px;
margin: -8em 3em 0 3em; }
.circle {
width:260px;
height:260px;
border-radius:50% 50% 50% 50%;
overflow:hidden;
float: left;
margin-bottom: 0.5em;
border: 10px solid #100000; }
.circle img {
margin-left:-50%;
margin-top:-50%;
opacity: 0.5; }
I've been pulling my hair out over this, so I hope I can get some help here, thanx! :)