Overlay Fade Out from Centre
I'd like to know how to make an overlay gradually disappear from its centre so that the image behind it becomes visible via an increasing circle from the centre. I know there are existing jQuery methods for example like slideDown() and slideUp(). Are there any existing methods out there for this effect or how else can I go about it?
If you can imagine a black overlay with a hole in the middle showing the image behind it and that hole getting bigger eventually revealing the whole image behind it.
Here's a demo with slide up and down.
HTML:
<div id= 'container'>
<img src=>
<div id = 'overlay'></div>
</div>
CSS:
#container {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: blue;
z-index: 1;
top: 0;
left: 0;
}
JS:
$('#container').mouseenter(_=> {
$('#overlay').slideUp();
});
$('#container').mouseleave(_=> {
$('#overlay').slideDown();
})
jquery css animation
asked Nov 20 '18 at 20:47
mista rsvmista rsv
576
add a comment |
I'd like to know how to make an overlay gradually disappear from its centre so that the image behind it becomes visible via an increasing circle from the centre. I know there are existing jQuery methods for example like slideDown() and slideUp(). Are there any existing methods out there for this effect or how else can I go about it?
If you can imagine a black overlay with a hole in the middle showing the image behind it and that hole getting bigger eventually revealing the whole image behind it.
Here's a demo with slide up and down.
HTML:
<div id= 'container'>
<img src=>
<div id = 'overlay'></div>
</div>
CSS:
#container {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: blue;
z-index: 1;
top: 0;
left: 0;
}
JS:
$('#container').mouseenter(_=> {
$('#overlay').slideUp();
});
$('#container').mouseleave(_=> {
$('#overlay').slideDown();
})
jquery css animation
asked Nov 20 '18 at 20:47
mista rsvmista rsv
576
what have you tried? please add a code to see what you have so far
– Riskbreaker
Nov 20 '18 at 21:18
@Riskbreaker I'm not really sure where to start. I just need pointing in the right direction
– mista rsv
Nov 20 '18 at 23:35
add a comment |
I'd like to know how to make an overlay gradually disappear from its centre so that the image behind it becomes visible via an increasing circle from the centre. I know there are existing jQuery methods for example like slideDown() and slideUp(). Are there any existing methods out there for this effect or how else can I go about it?
If you can imagine a black overlay with a hole in the middle showing the image behind it and that hole getting bigger eventually revealing the whole image behind it.
Here's a demo with slide up and down.
HTML:
<div id= 'container'>
<img src=>
<div id = 'overlay'></div>
</div>
CSS:
#container {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: blue;
z-index: 1;
top: 0;
left: 0;
}
JS:
$('#container').mouseenter(_=> {
$('#overlay').slideUp();
});
$('#container').mouseleave(_=> {
$('#overlay').slideDown();
})
jquery css animation
asked Nov 20 '18 at 20:47
mista rsvmista rsv
576
I'd like to know how to make an overlay gradually disappear from its centre so that the image behind it becomes visible via an increasing circle from the centre. I know there are existing jQuery methods for example like slideDown() and slideUp(). Are there any existing methods out there for this effect or how else can I go about it?
If you can imagine a black overlay with a hole in the middle showing the image behind it and that hole getting bigger eventually revealing the whole image behind it.
Here's a demo with slide up and down.
HTML:
<div id= 'container'>
<img src=>
<div id = 'overlay'></div>
</div>
CSS:
#container {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: blue;
z-index: 1;
top: 0;
left: 0;
}
JS:
$('#container').mouseenter(_=> {
$('#overlay').slideUp();
});
$('#container').mouseleave(_=> {
$('#overlay').slideDown();
})
jquery css animation
jquery css animation
asked Nov 20 '18 at 20:47
mista rsvmista rsv
576
asked Nov 20 '18 at 20:47
mista rsvmista rsv
576
edited Nov 20 '18 at 22:22
mista rsv
asked Nov 20 '18 at 20:47
mista rsvmista rsv
576
asked Nov 20 '18 at 20:47
mista rsvmista rsv
576
asked Nov 20 '18 at 20:47
mista rsvmista rsv
576
576
what have you tried? please add a code to see what you have so far
– Riskbreaker
Nov 20 '18 at 21:18
@Riskbreaker I'm not really sure where to start. I just need pointing in the right direction
– mista rsv
Nov 20 '18 at 23:35
add a comment |
what have you tried? please add a code to see what you have so far
– Riskbreaker
Nov 20 '18 at 21:18
@Riskbreaker I'm not really sure where to start. I just need pointing in the right direction
– mista rsv
Nov 20 '18 at 23:35
what have you tried? please add a code to see what you have so far
– Riskbreaker
Nov 20 '18 at 21:18
what have you tried? please add a code to see what you have so far
– Riskbreaker
Nov 20 '18 at 21:18
@Riskbreaker I'm not really sure where to start. I just need pointing in the right direction
– mista rsv
Nov 20 '18 at 23:35
@Riskbreaker I'm not really sure where to start. I just need pointing in the right direction
– mista rsv
Nov 20 '18 at 23:35
add a comment |
1 Answer
1
active
oldest
votes
Perhaps consider scaling the image up with CSS to keep it simple?
.background {
background-color: blue;
width: 200px;
height: 200px;
left: 0;
right: 0;
position: absolute;
overflow: hidden;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(0.01);
opacity: 0;
border-radius: 50%;
transition: all 0.5s ease;
}
.background:hover img {
transform: scale(1.5);
opacity: 1;
}<div class="background" id="back">
<img src="https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg"/>
</div>answered Nov 21 '18 at 2:59
Kevin BaiKevin Bai
18817
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401269%2foverlay-fade-out-from-centre%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Perhaps consider scaling the image up with CSS to keep it simple?
.background {
background-color: blue;
width: 200px;
height: 200px;
left: 0;
right: 0;
position: absolute;
overflow: hidden;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(0.01);
opacity: 0;
border-radius: 50%;
transition: all 0.5s ease;
}
.background:hover img {
transform: scale(1.5);
opacity: 1;
}<div class="background" id="back">
<img src="https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg"/>
</div>answered Nov 21 '18 at 2:59
Kevin BaiKevin Bai
18817
add a comment |
Perhaps consider scaling the image up with CSS to keep it simple?
.background {
background-color: blue;
width: 200px;
height: 200px;
left: 0;
right: 0;
position: absolute;
overflow: hidden;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(0.01);
opacity: 0;
border-radius: 50%;
transition: all 0.5s ease;
}
.background:hover img {
transform: scale(1.5);
opacity: 1;
}<div class="background" id="back">
<img src="https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg"/>
</div>answered Nov 21 '18 at 2:59
Kevin BaiKevin Bai
18817
add a comment |
Perhaps consider scaling the image up with CSS to keep it simple?
.background {
background-color: blue;
width: 200px;
height: 200px;
left: 0;
right: 0;
position: absolute;
overflow: hidden;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(0.01);
opacity: 0;
border-radius: 50%;
transition: all 0.5s ease;
}
.background:hover img {
transform: scale(1.5);
opacity: 1;
}<div class="background" id="back">
<img src="https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg"/>
</div>answered Nov 21 '18 at 2:59
Kevin BaiKevin Bai
18817
Perhaps consider scaling the image up with CSS to keep it simple?
.background {
background-color: blue;
width: 200px;
height: 200px;
left: 0;
right: 0;
position: absolute;
overflow: hidden;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(0.01);
opacity: 0;
border-radius: 50%;
transition: all 0.5s ease;
}
.background:hover img {
transform: scale(1.5);
opacity: 1;
}<div class="background" id="back">
<img src="https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg"/>
</div>.background {
background-color: blue;
width: 200px;
height: 200px;
left: 0;
right: 0;
position: absolute;
overflow: hidden;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(0.01);
opacity: 0;
border-radius: 50%;
transition: all 0.5s ease;
}
.background:hover img {
transform: scale(1.5);
opacity: 1;
}<div class="background" id="back">
<img src="https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg"/>
</div>.background {
background-color: blue;
width: 200px;
height: 200px;
left: 0;
right: 0;
position: absolute;
overflow: hidden;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(0.01);
opacity: 0;
border-radius: 50%;
transition: all 0.5s ease;
}
.background:hover img {
transform: scale(1.5);
opacity: 1;
}<div class="background" id="back">
<img src="https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg"/>
</div>answered Nov 21 '18 at 2:59
Kevin BaiKevin Bai
18817
answered Nov 21 '18 at 2:59
Kevin BaiKevin Bai
18817
answered Nov 21 '18 at 2:59
Kevin BaiKevin Bai
18817
answered Nov 21 '18 at 2:59
Kevin BaiKevin Bai
18817
18817
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401269%2foverlay-fade-out-from-centre%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what have you tried? please add a code to see what you have so far
– Riskbreaker
Nov 20 '18 at 21:18
@Riskbreaker I'm not really sure where to start. I just need pointing in the right direction
– mista rsv
Nov 20 '18 at 23:35