I'm trying to make a custom carousel, but there's something that makes it seem uncorrect, it is the position of the carousel items after it. If I don't use any image (just text) the carousel item works fine and is right in the center. But when I use the image, the item carousel container is not in the right position.
& > .content-modal {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: relative;
& > .carousel {
height: 70%;
width: 100%;
background-color: blue;
& > .inner {
height: 100%;
width: 100%;
white-space: nowrap;
transition: transform 0.3s;
& > .carousel-item {
height: 100%;
width: 100%;
background-color: red;
display: inline-flex;
justify-content: center;
align-items: center;
& > .container-image {
& > img {
width: 100%;
max-width: 1000px;
height: auto;
object-fit: cover;
object-position: center;
}
}
}
}
}
}
}
React component :
<div className="content-modal">
<div className="carousel">
<div
className="inner"
style={{ transform: `translateX(-${activeIndex * 100}%)` }}
>
{alertImages.map((image, i) => (
<div className="carousel-item" key={i}>
<div className="container-image">
<img src={image.imageURL} alt="" />
</div>
</div>
))}
</div>
</div>
</div>
First image showing carousel item in center, second image showing carousel item not in center.
1.
2.
Related
I'm trying to make my images stick to the navbar at the top. When I make the tab smaller, the pictures have a noticeable gap. I want to get rid of this gap before I start aligning the pictures vertically for phone usage.
I have managed to make it responsive horizontally, but the gap is bugging me a lot. I could just add a black background to hide it, but I feel like that takes away from it.
When I'm gonna make it more responsive, I'm going to use media queries, I wonder if that could solve the issue, but I don't think it would.
Any ideas on how this could be solved?
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
overflow-x: hidden;
}
.navbox {
position: absolute;
width: 100%;
height: 15vh;
background-color: #271f30;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 9999;
}
.navbox img {
height: 10vh;
}
.home {
width: auto;
height: 75px;
}
.bildspel {
}
.arrowleft {
width: 60px;
height: 60px;
}
.arrowright {
width: 60px;
height: 60px;
}
.tre {
height: 90vh;
width: 99vw;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.tre img {
width: calc(100vw / 3);
aspect-ratio: 1/1.75;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.tre img:hover {
transform: scale(1.15)
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Witcher - Streaming on Netflix</title>
<link href="seessess.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbox">
<div></div>
<a href="index.html">
<img class="home" src="witcherlogo.png" alt="Logo">
</a>
<div></div>
</div>
<div class="tre">
<img src="Crop2.png" onClick="location.href='index.html'">
<img src="Crop1.png" onClick="location.href='index.html'">
<img src="Crop3.png" onClick="location.href='index.html'">
</div>
</body>
</html>
The gap happens because your vh calculations don't add up. You can fix it by removing height: 90vh; from .tre so it will always stick to the nav bar.
It also helps to put your three images in a div, so you can use flex more easily. (the images are always 100% of their flex div container)
I added a media query to put the images under each other on a small screen.
*{
margin: 0;
padding: 0;
}
.navbox {
width: 100%;
height: 15vh;
background-color: #271f30;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbox img {
height: 10vh;
}
.tre {
display: flex;
align-items: center;
justify-content: space-between;
}
.tre div {
overflow:hidden;
}
.tre img {
transition: 0.3s ease-in-out;
cursor: pointer;
width:100%;
}
.tre img:hover {
transform: scale(1.15)
}
#media (max-width:300px) {
.tre {
flex-direction:column;
}
}
<div class="navbox">
<div></div>
<a href="index.html">
<img class="home" src="https://cataas.com/cat" alt="Logo">
</a>
<div></div>
</div>
<div class="tre">
<div>
<img src="https://cataas.com/cat">
</div>
<div>
<img src="https://cataas.com/cat">
</div>
<div>
<img src="https://cataas.com/cat">
</div>
</div>
I want exactly like this website: https://www.petzl.com/INT/en
I want to show the text that is the center having 3 divs "Services" "Training" and "Shop" to have in one line or row.
I tried inline-block, padding, margins, float etc. but maybe I am doing something wrong.
If I dont use this line "place-content:center;" it places it to left with a lot of spaces.
My website link: beta.edgerope.com
Please find code below:
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
:
You can use CSS flex property something like this
.image {
display: flex;
justify-content: space-evenly;
align-items: center;
}
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I'm trying to flex the img and .title elements within a flex-column. When the page is resized the image should grow/shrink while maintaining its aspect ratio and the title text should remain the same height at the bottom of the screen. However, when I reduce the screen height the title text is pushed off the screen.
Also, the height of the .title element may not always be a single line, will not be known prior to rendering.
Code: https://jsfiddle.net/qk4wbfpe/
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container > img {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
width: 100%;
height: 100%;
object-fit: contain;
}
.container .title {
padding: 10px;
color: white;
text-align: center;
background-color: gray;
}
<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/paWPwF85Vkcs8YUuyvA3YM-650-80.jpg.webp">
<div class="title">
Planet Earth
</div>
</div>
If you add min-height:0 to .container>img it will give the desired result.
body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container>img {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
width: 100%;
min-height:0;
object-fit: contain;
}
.container .title {
padding: 10px;
color: white;
text-align: center;
background-color: gray;
}
<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/paWPwF85Vkcs8YUuyvA3YM-650-80.jpg.webp">
<div class="title">
Planet Earth
</div>
</div>
add a wrap to your container to make it flow nicely
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
height: 100%;
and add a flex-basis on your child (img)
.container > img {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 25%;
background-color: blue;
object-fit: contain;
or you can remove the flex-grow, shrink and shorthand it to
flex: 1 1 25%;
is that what you needed?
In a Reactjs project, I have successfully added an overlay on top of an image in order to create some opaqueness.
However, I am having trouble now adding text on top of both these items. I want the text to be on top of the overlay,centered and in white, and most importantly not effected by the overlay's opaque feature.
Here is what I have so far:
In css file:
.container {
position: relative;
background: #2F5596;
z-index: auto;
}
.container::before {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.80);
content: '';
}
.image {
display: block;
justify-content: center;
object-fit: cover;
align-items: center;
margin: auto;
z-index: 0;
}
.text {
display: block;
justify-content: center;
object-fit: cover;
align-items: center;
margin: auto;
z-index: 2;
}
In React.js file:
import logo from '../../assets/images/WhiteLettering_BlueBackground/WhiteLettering_BlueBackground_256.png';
import classes from './Layout.css';
const layout = (props) => {
return (
<div className={classes.container}>
<img src={logo} className={classes.image}/>
<div style={{ textAlign: "center", color: "white"}} >
<h1>Dynasty Football</h1>
<h1>A Complete Draft Tool Kit</h1>
<FontAwesomeIcon icon={faArrowDown} />
</div>
</div>
)
}
export default layout;
The text and arrow appear but they are effected by the opaqueness of the overlay.
Any help would be greatly appreciated.
Thanks,
Why do you set the background: rgba(0, 0, 0, 0.80); in
.container::before {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.80);
content: '';
}
?
If you'd just use a rgba value in your container class and get rid of the background attribute in :before, it would not influence your text color, like:
.container {
position: relative;
background: rgba(47, 85, 150, .8);
z-index: auto;
}
In case it should be like it is:
Another way without changing your background properties would be to add position: relative; to your css attributes for your text wrapper:
<div
style={{
textAlign: "center",
color: "white",
position: "relative".
}}
>
<h1>Dynasty Football</h1>
<h1>A Complete Draft Tool Kit</h1>
<FontAwesomeIcon icon={faArrowDown} />
</div>
How to position the text with vertical & horizontal align on top of the container
As said, it is a bit hard to unterstand why your (css) is that complex to achieve what you want (e.g. why you need the container::before definition). But in order to achieve what you want, you could the image as a background image of a newly created background .container_image and setting content properties with flex box for achieving the right content align in .container. This is how it can look like:
.container {
position: relative;
background: #2f5596;
display: flex;
justify-content: center;
align-items: center;
}
.container_image {
background-image: url("logo-url");
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
.container::before {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
content: "";
}
.content {
color: white;
position: relative;
}
<div className="container">
<div className="container_image">
<div className="content">
<h1>Dynasty Football</h1>
<h1>A Complete Draft Tool Kit</h1>
</div>
</div>
</div>
i'm trying to scale image double when click zoom-in button, and half image when click zoom-out button
My issue is, when click zoom-in button (so, image size is double)
and if it's size over than container, the left side of image (or top side of image) cut off.
what should i do?
same question here, CSS Transform scale scrolling issue ... but it's not a good idea.
because it also scale focus on 'top-left side' when zoom-out
image, so center alignment is impossible
(i want to apply transform: scale(..) using transform-origin: center)
the only way that i know is every time calculate image size, and apply margin for cut-off, but it is hard to apply
any idea please? :o
code look like this.
constructor() {
super()
this._refs = { ratio: 100 }
}
getImageStyle() {
return {
transform: scale(calc(${this.state.ratio} / 100)),
'transform-origin': 'center'
}
}
zoomIn() {
this.setState({ ratio: this.state.ratio + 25 })
}
zoomIn() {
this.setState({ ratio: this.state.ratio - 25 })
}
render() {
const { src } = this.props
return (
<div
className={styles.wrapper}
<img
style={this.getImageStyle()}
ref={(elem) => setRefToNode(this._refs, 'image', elem)}
className={styles.image}
src={src} />
</div>
)
}
and css.
.wrapper {
display: flex;
position: relative;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
overflow: scroll;
.image {
position: relative;
max-width: 100%;
max-height: 100%;
background-color: white;
}
}
Don't understand what the problem is.
Image doesn't cut off when transforming.
$("#zoom-in").on("click", function() {
$(".image").removeClass("zoom-out");
$(".image").addClass("zoom-in");
});
$("#zoom-out").on("click", function() {
$(".image").removeClass("zoom-in");
$(".image").addClass("zoom-out");
});
$("#zoom-off").on("click", function() {
$(".image").removeClass("zoom-in");
$(".image").removeClass("zoom-out");
});
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border: 4px solid;
}
.wrapper .image {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.4);
border-radius: 50%;
transform-origin: center;
transition: transform ease .3s;
}
.wrapper .image.zoom-in {
transform: scale(2);
}
.wrapper .image.zoom-out {
transform: scale(0.5);
}
section {
position: fixed;
bottom: 0;
left: 0;
margin: 10px;
}
section button {
width: 30px;
height: 30px;
margin: 10px;
font-weight: bold;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image"></div>
</div>
<section>
<button id="zoom-out">−</button>
<button id="zoom-off">0</button>
<button id="zoom-in">+</button>
</section>