Good Afternoon Experts,
I'm having an issue with getting image to scale on hover. I've checked other thread and nothing seems to work for me. From what I've learned from other thread is that images scaling don't work on inline elements. Thus, I've tried including display:inline-block into my .banner-left-img class and .left class. However, it didn't work out for me.
I've tried transform with contrast, filter, and etc .. no issue but with scaling it becomes a problem.
What am I not understanding?
.banner .left {
flex: 1;
height: 100%;
padding-right: 10%;
background: var(--primary2-color);
z-index: 2;
}
.banner .left .banner-left-img {
position: relative;
top: 50%;
left: -150%;
transform: translateY(-50%);
width: 145%;
animation: 0.75s ease-in forwards imgSlideFromLeft;
}
#keyframes imgSlideFromLeft {
100% {
top: 50%;
left: 7%;
transform: translateY(-50%);
}
}
.banner-left-img:hover {
transform: scale(1.5);
}
<section class="banner">
<div class="left">
<img class ="banner-left-img" src="/img/banner/banner.png" alt="Mercedes AMG GT R Car Img">
<img class ="social instagram" src="/img/social-media/instagram.svg" alt="Instagram icon">
<img class ="social youtube" src="/img/social-media/youtube.svg" alt="Youtube Icon">
</div>
<div class="right">
<div class="content">
<h1>the all new 2020<br>mercedes amg GT R</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nisi tempor ipsum, mattis cursus
gravida aenean dolor. Fermentum pharetra et habitasse netus gravida nibh. Est velit elementum nisl,
tortor at elementum nulla. Egestas cras purus hendrerit aenean fermentum. </p>
<button type="button">test drive now</button>
</div>
</div>
</section>
I've managed to work my transform. The problem with it was with the selector where by hover was misplaced.
instead of .banner-left-img:hover { transform: scale(1.5); }
it should be .banner .left:hover .banner-left-img { transform: translateY(-50%) scale(1.05); }
I'll like to thank jQueryHtmlCSS for sharing other thread which helped me solved my problem.
Try
width:100px;
height: auto;
OR
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to do a boxes like below for my website's events but I got stuck.
The problems I can not solve:
Reduce images to the same size
Create modules of the same size
Align the modules in the same line
.background {
width:360px;
height:200px;
}
.image{
width:100%;
height:100%;
}
.text {
width:100%;
height:25%;
color:#ffffff;
background:blue;
z-index: auto;
}
<div class="background">
<div class="image">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
Questions... and answers. Let's go over the issues you have one by one.
Reduce images to the same size
It's best to let CSS take care of this. By setting the background of an element to the image you want and setting the background-size to cover, the browser will scale the image such that the aspect ratio is maintained and the image nicely covers all of the element you put it in.
Now make all elements the same size and voilà, this point is done.
Create modules of the same size
This can be achieved in two ways.
Set fixed sizes on your boxes.
Use more advanced CSS, in particular the flexbox layout module.
To keep things simple, I'll use the first approach for now. Read up on flex if you are interested in it!
Align the modules in the same line
This can be achieved in many ways, but the most straightforward one is setting display to inline-block. This will make it so that every block in your module is treated as a, well, a block, meaning that it can have a set width and height. At the same time, it is laid out as if it were text. So, one block after another will simply go on the same line. When that does not fit on screen anymore, blocks will flow to the next line.
Putting this all together. Here is a quick toy example that includes all of the above. It should serve as a good starting point to build from.
.card {
display: inline-block;
vertical-align: top;
width: 150px;
height: 270px;
margin: 10px;
padding: 0;
border: 1px solid #444;
border-radius: 5px;
}
.image {
/* width is 100%, so 150px, by default */
height: 150px;
background-size: cover;
}
.text {
height: 150px;
margin-top: -40px;
}
.text > p {
max-height: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
margin: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
color: #eee;
font-size: 20px;
line-height: 20px;
}
p {
margin: 0;
padding: 10px;
font-size: 15px;
line-height: 20px;
}
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/abstract/');"></div>
<div class="text">
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus auctor odio, sed lobortis odio pellentesque tincidunt. Curabitur et libero maximus, consequat mi non, dignissim turpis.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/city/');"></div>
<div class="text">
<h1>Bar</h1>
<p>Sed ac lacus vel mi mollis ullamcorper quis ac sapien. Ut quis ornare ligula. Nullam a sapien eget arcu mattis aliquam. Quisque dapibus leo vel lacus rutrum sollicitudin.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/cats/');"></div>
<div class="text">
<h1>Baz</h1>
<p>Nullam eu urna dictum, gravida augue nec, dignissim enim. Duis sit amet elit quis mauris consectetur rhoncus et a ipsum. Fusce vel sagittis nulla, et imperdiet quam.</p>
</div>
</div>
You need to change your HTML and CSS to make it work properly.
<div class="background">
<div class="image" style="background-image: url('https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg');">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
then your CSS should look like this:
.background {
width: 360px;
height: 200px;
position: relative;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
height: inherit;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
}
That will make an image to fully cover the background space and then the .text will be an overlay on the image. Actually, you could even skip the .image div, add background and the CSS to the .background div and it will work as well.
The example you provided features something different than your code is suggesting. If you want to achieve the look from example, then:
.background {
width: 360px;
height: 200px;
position: relative;
background: #fff;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
position: relative;
}
.image:before {
content: "";
display: block;
padding-top: 60%; /* that will make a fixed ratio of you image box, even if you'll scale the background boc /*
}
.text {
/* actually it doesn't need styling in that case */
}
.background's parent {
display: flex; /* to make the blocks even in height without setting that as a fixed value */
}
Your code and the example you provided are doing different things. In order to get the effect of your example, you need more than one "card" (image and text together).
You can use display: flex on the .background div so that all the cards are the same height. Then you can add some margin to the cards so they are separated a little.
.background {
display: flex;
background: cyan;
}
.card {
width: 360px;
background: white;
margin: 10px;
}
.text {
padding: 0 5px;
}
.text p {
width:100%;
overflow: hidden;
}
<div class="background">
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>test test test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>another test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit, massa sed tristique lacinia, mauris lectus ultricies ipsum, vitae lobortis lectus arcu quis nisl. Etiam pulvinar porttitor mi, at aliquet quam mattis non.</p>
</div>
</div>
</div>
I am making flip cards which can show photos of some winners and when the card is flipped then some info about those people is shown. I am able to make those cards and even flip them. But, the problem is that in second card then we hover, the card is flipped and the information is shown beneath the card rather than on the card. Moreover, the image is also reversed and shown but, it shouldn't be showing the image once the card is flipped.
The first works fine though. So if anyone can point out the problem then it would be great help.
This is how the second card is behaving when I hover over it.
Here's the code.
<html>
<head>
<style>
.winners_table{
border: 2px solid red;
}
.winner_container {
border: 2px solid blue;
perspective: 1000px;
display: inline-block;
margin: 5px;
width: 220px;
height: 250px;
z-index: 1;
position: relative;
}
.winner{
border: 2px solid black;
transition: 0.6s;
transform-style: preserve-3d;
width: 100%;
height: 100%;
}
.winner_container:hover .winner{
transform: rotateY( 180deg );
-webkit-transform: rotateY(180deg);
}
.winner img{
border-radius: 300px;
border: 1px solid white;
margin: 0 auto;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
margin: 0 auto;
}
.winner h3{
text-align: center;
}
/* hide back of pane during swap */
.front, .back {
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr class="winners_table">
<td class="winner_container">
<div class="winner">
<div class="front">
<img src="facebook.png" alt="Winner" height="200" width="200">
<h3>Facebook</h3>
</div>
<div class="back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue</p>
</div>
</div>
</td>
<td class="winner_container">
<div class="winner">
<div calss="front">
<img src="facebook.png" alt="Winner" height="200" width="200">
<h3>Facebook</h3>
</div>
<div class="back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices in dolor sit amet lacinia. Etiam posuere molestie varius. Nam id eros non tortor rutrum vehicula quis sed augue </p>
</div>
</div>
</td>
</tr>
</table>
</body>
If you want to see the github repo then, it's here.
Just a misspelling. In your 2nd div you wrote
<div calss="front">
instead of
<div class="front">
Working demo.
I want to display every thing in the page rotated consistently and dependently 90 degree, I tried to do it but the result was inaccurate and each element rotated independently.
So that was fun. Fiddle
body{
margin:0;
overflow:hidden;
}
.wrapper{
transform: rotate(90deg);
transform-origin:bottom left;
position:absolute;
top: -100vw;
left: 0;
height:100vw;
width:100vh;
background-color:#000;
color:#fff;
overflow:auto;
}
<body>
<div class='wrapper'>
test<br />
<hr />
<div><hr /></div>
<div><div><hr /></div></div>
<div>ing</div>
</div>
</body>
Had to wrap the content in a wrapper div, set body overflow to hidden, and slide the thing up by its width.... but hey, it works.
If you're curious, yes, I did set height to screen-width and width to screen-height. Makes it scale itself cleanly.
writing-mode: vertical-rl; also performs a rotation by 90 deg and could be applied to body.
body {
margin: 0;
overflow: hidden;
transform-origin: right;
transform: translate(-100vw, 0) rotate(180deg);
writing-mode: vertical-rl;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget vestibulum lectus, eget sollicitudin quam. Etiam tempus mollis orci, et fermentum enim maximus sed.
<br/>
<hr/>
https://jsfiddle.net/f2hmwgkz
I've made a codepen at http://codepen.io/anon/pen/vNVMRE
I know how to make a sticky footer.
However, in my case my content (.moveDown) needs to be positioned absolute, because of that the footer doesn't stick at the bottom.
You can check that in the codepen. If you make the window smaller until you have scroll bars, the footer moves over the content and stays in the new position;
Of course I could make the .movedown div relative by changing the code on line 40 & 41 to
position: relative;
top: 0;
But then my mobile version gets problems.
I have made a simplified version # http://lettherobots.be/test2/
As you can see, the footer works until there's a scroll bar.
If you scale the window to max-size 460 there's a vertical menu which can be accessed through the hamburger.
If I make the position of the content wrapper (.moveDown) relative, then the links in my vertical navigation become inactive. I have tried fixing that with z-index, but that didn't solve the problem.
Any idea how I can get this fixed? How I can get a footer at the end of my documents even if the content of the page
Some of the code:
Html:
<body>
<div class="container">
<div class="navContainer">
<nav class="horizontalNav">
....
</nav>
<nav class="verticalNav" id="verticalMenu">
...
</nav>
</div>
<div class="content moveDown clearfix">
<header>
<img src="images/headerPic.jpg" alt="Header picture">
</header>
<div class="htmlWrapper">
{$importedContent}
</div>
</div>
<footer>bla bla</footer>
</div>
CSS
.moveDown {
left: 0;
margin: 0 auto;
padding: 0;
position: absolute;
right: 0;
top: 60px;
width: 100%;
z-index: -2;
-webkit-transition: top 300ms ease;
-moz-transition: top 300ms ease;
-o-transition: top 300ms ease;
-ms-transition: top 300ms ease;
transition: top 300ms ease;
}
You can't stick only with position:absolute, because absolute elements is positioned according to first parent relative element. You can fix at the bottom of some div, but it is static, so it can't move according to scroll. There is an excelent explanation at CSS-tricks where you can see this differentes.
See this example below:
html{
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
html {
height: 100%;
}
.clearfix::after,
section::after,
header::after,
footer::after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.container {
min-height: 100%;
position: relative;
}
.navHorizontal {
height: 60px;
text-align: right;
background-color: #eee;
}
nav.navHorizontal a {
display: inline-block;
}
.content {
padding-bottom: 100px;
position: absolute;
top:60px;
width: 100%;
}
header img {
width: 100%;
height: 100px;
}
footer {
background-color: #ddd;
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
}
<div class="container">
<div class="navContainer">
<nav class="navHorizontal">
<section>
<div class="linkSection">
Home
Portfolio
Tutorials
Contact
</div>
</section>
</nav>
</div>
<div class="content clearfix">
<header>
<img src="http://placehold.it/200x100">
</header>
<div>
<h1>Some text here</h1>
</div>
<div>
Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper.
Phasellus fringilla posuere urna, ut porttitor nisi.
</div>
<div>
Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper.
Phasellus fringilla posuere urna, ut porttitor nisi.
</div>
<footer>Footer Content</footer>
</div>
</div>
I hope, this question wasn't asked before, but I searched the net and didn't find an answer.
I'm trying to do a slide over over an image. There are lot's of examples in the internet, but they don't seem to work for me.
The slide works, but the sliding div shows before and out of the target image.
Here is my code:
div.details {
position: absolute;
left: -250px;
top: 0px;
width: 240px;
height: 170px;
overflow: hidden;
margin: 0px;
padding: 5px;
opacity: 0.7;
background-color: grey;
color: white;
transition: all .5s;
display: block;
transition: all 0.5s;
-webkit-transition: all .5s;
}
div.project:hover div.details,
div.project-nl:hover div.details {
left: 0px;
}
<div class="project">
<a class="fancybox" href="/index.php/assets/Uploads/th2.jpeg">
<img src="/index.php/assets/Uploads/_resampled/SetSize250180-th2.jpeg" alt="Project2" />
<div class="details">
<h2 class="ptitle">Project2</h2>
<p>Nullam suscipit diam et leo malesuada finibus. Pellentesque hendrerit porta sodales. Suspendisse volutpat eros sapien, et ullamcorper orci condimentum vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Maecenas auctor auctor.
</p>
</div>
</a>
</div>
This is how I found it in the net, and there it works fine, just, that when I try it, the sliding div is visible all the time.
Is there a way to hide the div, and just show it when it enters the image?
I tried display:none, but then the div just appears, without a slide effect.
Any help would be apreciated.
Just posted it, an now I got the answer.
I have to set overflow:hidden; on the containing (div class=project) div.