My requirement is to show a bit of hero image on load and then as I scroll complete image should unfold.
reference website : https://karpov.paris/ (similar hero image effect)
I tried exploring several links, all the links are explaining about zoom-out effect.
Can you please help me to meet my requirement.
Thanks in advance.
Here I made a simple demo. I hope it can help you.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".zoom img").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
});
});
body {
height: 100%;
margin: 0;
padding: 0;
}
.content{
position: relative;
min-height: 100vh;
background-color: white;
font-size: 30px;
padding: 40px;
}
.zoom{
height: 50%;
overflow: hidden;
padding-bottom: 55%;
}
.zoom img{
position: fixed;
top: 0%;
left: 50%;
max-width: 150%;
transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zoom">
<img src="https://picsum.photos/1200/1200" alt="img"/>
</div>
<div class="content">
Put some content here.
</div>
Related
I'm developing a website only using HTML, CSS and Javascript, it is my first web page, and I'm getting a problem of the height on a fixed block. The "Contact us" link must open a box with the contact information in the center of the screen, so I used the fixed position, I wanted the height to work as usual, I mean only the height of it's content, but instead, it is showing 100% height of the screen, thank you, the web page is in Spanish, the link to the web site is:
http://www.bordadosyalgomas.com.ve/
Again, this is my first web page, plus I'm on the navigation bar by the time.
EDIT:
Sorry, first time asking, I didn't provide any code:
div#contacts1{
font-family: "Ubuntu Medium";
padding: 3.5em;
width: 50%;
border: solid 2px;
border-radius: 20px;
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: auto;
}
div#contacts{
width: 100%;
height: 4000px;
background-color: rgba(0,0,0,0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
div#contacts1 img{
height: 60px;
display: inline-block;
vertical-align: middle;
}
div#contacts1 p{
font-size: 1.3em;
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
padding-left: 1.5em;
}
div#contacts1 p strong{
display: block;
font-size: 0.9em;
margin: 0;
margin-bottom: 0.2em;
padding: 0;
}
div.cparador{
height: 100px;
margin-bottom: -1em;
display: block;
}
div.cparador img{
-webkit-filter: drop-shadow(-2px 2px 4px black);
filter: drop-shadow(-2px 2px 4px black);
margin-left: 3em;
}
div.cparador h1{
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bordaos y algo mas</title>
<style type="text/css">
#import url("index.css") screen;
</style>
</head>
<body>
<div id="contacts">
</div>
<div id="contacts1">
<div class="cparador">
<h1>Información de contacto:</h1>
</div>
<div class="cparador">
<img src="contacts/phone.png">
<p><strong>Teléfono</strong>
0257-2535145</p>
</div>
<div class="cparador">
<img src="contacts/telegram.png">
<p><strong>Telegram</strong>
#bordados.ym</p>
</div>
<div class="cparador">
<img src="contacts/instagram.png">
<p><strong>Instagram</strong>
#bordados.ym</p>
</div>
<div class="cparador">
<img src="contacts/mail.png">
<p><strong>Correo Electrónico</strong>
bordados.ym#gmail.com</p>
</div>
<div class="cparador">
<img src="contacts/whats.png">
<p><strong>Whatsapp</strong>
0414-5214041</p>
</div>
</div>
</body>
</html>
A picture of the problem
You need to remove bottom:0; - this combined with top:0; causes the div to take 100% height.
Then you can set:
top: 50%; // move popup down by 50% of window height
transform: translateY(-50%); // move it back by 50% of popup height
EDIT:
also consider adding max-height: 100%; to make use of overflow: auto; when height of the window is shorter than popup's height.
There is a simple example of a Modal You can use, and instead of any extraa Custom CSS(Specially Height-Width) leave that simple.
that auto height according to your contents!
link- https://getbootstrap.com/docs/4.0/components/modal/
I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
Ive got a product page with a smaller image of the product.
Now I want to show a bigger version of this image with a colored background covering the whole page, while I hover the smaller image.
The problem is, that the bigger image flickers while I move the mouse around.
My CSS:
#zoomed-product-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(162, 130, 192, 0.8);
z-index: 0;
visibility: hidden;
}
#zoomed-product-img img {
display: block;
margin: auto auto;
}
.productsdetail-image:hover~#zoomed-product-img {
visibility: visible;
}
My HTML:
<div class="productdetails">
<div class="productsdetail-image">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
<div id="zoomed-product-img">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
Can you help me? Maybe my way of thinking is wrong.
I think it flickers because when I show the bigger image, it is above (z index) the small one and I am not hovering the image anymore so it disappears.
I would also love to solve this with javascript, if you can give me any advice.
You need to specify dimensions for the container of the image. This is why it is flickering. I also used display: none; and display:block to hide and show the images.
.productdetails {
position: relative;
}
#zoomed-product-img {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* This is the product detail image styles */
.productsdetail-image {
display: block;
height: 200px;
width: 200px;
}
.productsdetail-image:hover img {
display: none;
}
.productsdetail-image:hover + #zoomed-product-img {
display: block;
}
HTML
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/200/200/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Demo:
http://jsfiddle.net/n07bt46y/
Please check this in full page
$(document).ready(function(){
$('.productsdetail-image img').hover(function() {
$(this).hide();
$('#zoomed-product-img ').show(500);
});
$('#zoomed-product-img .close').click(function(){
$(this).parent().hide();
$('.productsdetail-image img ').show();
});
});
.productsdetail-image img {
width: 150px;
height: auto;
transition: all 0.5s ease;
}
#zoomed-product-img {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#zoomed-product-img span.close {
position: absolute;
color: #fff;
cursor: pointer;
top: 20px;
right: 20px;
}
#zoomed-product-img img {
position: absolute;
width: 300px;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: aUto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<span class="close">close</span>
<img class="zoom-img" src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Are you wanna build something like that? Hoppefully that fiddle can help you
I'm trying to make a circle-shaped image with an overlay that shows on hover. However, the "hitbox" of hovering (and clicking) is incorrect, as shown in the snippet below.
This issue seems to only occur in Chrome (not sure about Safari). I've found some fixes on the Internet, but none of them worked. JSFiddle for testing
$(document).ready(function() {
$(".circle").click(function() {
alert($(this).attr("id"));
});
});
#canvas {
width: 100%;
padding-bottom: 75%;
position: relative;
overflow: hidden;
background-color: #eee;
}
.circle {
position: absolute;
width: 25%;
padding-bottom: 25%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
cursor: pointer;
/*https://stackoverflow.com/a/32987370/5532169*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
/*https://stackoverflow.com/a/25206004/5532169*/
z-index: 1;
/*https://stackoverflow.com/a/10296258/5532169*/
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
/*https://stackoverflow.com/a/16878347/5532169*/
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
.mid {
width: 100%;
height: 100%;
position: absolute;
}
.inner {
width: 100%;
height: 100%;
position: relative;
}
.inner>* {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.hover {
background-color: rgba(255, 255, 255, 0.6);
opacity: 0;
transition: opacity 0.5s;
}
.hover:hover {
opacity: 100;
transition: opacity 0.5s;
}
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72%;
text-align: center;
font-family: monospace;
font-size: 2em;
font-weight: bold;
color: #08f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas">
<div id="div1" class="circle">
<div class="mid">
<div class="inner">
<img src="https://dummyimage.com/320x320/000/fff" alt="">
<div class="hover">
<span>Hello World!</span>
</div>
</div>
</div>
</div>
</div>
Edit: Tested in Firefox 57, works without problem. IE and Edge were tested already, so it's a Chrome-/webkit-specific issue.
The blocks in HTML are square defined by position (x, y) and size (width, height) so the browser can have a simplified idea of what is on the page and interact with. So even with border-radius, mask-image, etc... your .circle div is still a square with coming drawn within.
To avoid that, you can't use a dynamic selector like :hover because it will use the shape of the div and that is a square. You need to use javascript to detect mouse position when hovering your block and with that execute an animation (with sinus and cosinus calculation).
You can get the mouse position with something like this :
<div class="circle" onmouseover="hoverFunction(e)"></div>
<script>
function hoverFunction(e) {
var x = e.clientX;
var y = e.clientY;
}
</script>
I also found this topic talking about getting elements position on the page.
You can change only .circle class these properties:
width: 26%;
padding-bottom: 26%;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
I want to place an overlay on my rounded image but when I set it, the overlay doesn't display over the image correctly? It is filling the column div. Not the overlay container. Can the overlay container be made to size to the image inside of it? I have tried display:inline-block;but that doesn't work. I am using Bootstrap.
HTML Code
<div class="row" style="background-color:#ECECEC">
<div class="col-md-4 col-sm-4" >
<div class="overlaycontainer">
<img class="roundimg" src="images/george1x1.jpg" >
<div class="overlay">
<div class="overlaytext">Hello World</div>
</div>
</div>
<center><h3>George Jones <br><small>Owner and Founder</small></h3></center>
</div>
CSS
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
border-radius: 50%;
display:inline-block
}
.overlaycontainer{
display:inline-block
}
.overlaycontainer:hover .overlay{
opacity: 1;
}
.overlaytext{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.roundimg{
max-width: 75%;
height: auto;
border-radius: 50%;
padding-top:10px;
display: block;
margin: 0 auto;
}
Any help would be appreciated.
Thanks
Joe
I was able to get this working a bit better by making this working demo with a placeholder image I was able to link to.
http://codepen.io/anon/pen/ryYaWx?editors=1100
and then adding position: relative to the .overlaycontainer selector, like this:
.overlaycontainer {
display: inline-block;
position: relative; /* <-- this was added*/
}
This works because you have .overlay set to position: absolute and you want the absolute positioning to be relative to .overlaycontainer instead of the entire page. Adding this line will do that.