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.
Related
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;
I got this issue that a portrait is overlapping my nav bar.
And I've been looking around and trying to find a fix, but no luck.
I have tried z-index, but sadly didn't work at all.
My code for the section:
/*Navbar CSS*/
.topNavMain,
.topNavMain ul {
margin: 0;
padding: 0;
background: rgba(227, 232, 237, 0.40);
color: #5f6f81;
list-style: none;
text-transform: none;
text-decoration: none;
width: 100%;
font-weight: 300;
font-family: 'Lato', Arial, sans-serif;
line-height: 60px;
z-index: 999 !important;
}
/*img class CSS*/
.imgPortrait {
width: 80%;
z-index: -999;
overflow: hidden;
}
<section id="aboutMe" class="contentS">
<div class="container">
<div class="row">
<div class="col slideIn margin-fix">
<h2 class="contentT">About me</h2>
<p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. <br> Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.</p>
</div>
<div class="col slideIn2">
<img src="img/portrait.jpg" alt="" class="imgPortrait img-fluid"></img>
</div>
</div>
</div>
</section>
Screenshot of my issue:
Click here.
Just a simple fix, you need to apply a z-index to the div containing the nav, not just the ul.
#navDiv {
z-index: 1;
}
In my case the arrows of the carousal overlapped with the navbar. As the arrow icons already had z-index as 1 so in my case I had to make the z-index of the navbar div as 2 and it worked.
I want to add a number to the top left corner of my div's, but whatever I have tried so far has not worked properly.
Here is what I currently have:
Here is what I would like:
Here is the code:
#Office365, #OneDrive {
height: 100px;
width: 16.259%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
background-color: #F2F2F2;
}
<div class="row" id="firstAppRow">
<div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
<span>1</span>
<div><img src="/TrainingResourceCenter/O365Training/PublishingImages/OVbiWcG.png" height="50px" width="50px" />
<p>Office365</p>
</div>
</div>
<div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
<div><img src="/TrainingResourceCenter/O365Training/PublishingImages/wJAtQYP.png" height="40px" width="40px" />
<p>OneDrive</p>
</div>
</div>
</div>
He, the solution will be to use absolute position for the numbers.
Note that the blocks containing the tag with the number will need to be positioned relative so that the numbers are absolute to that block. Here is a sample code
#Office365,#OneDrive{
display: inline-block;
margin-right: 2px;
background-color: #F2F2F2;
position:relative;
border:1px solid black;
padding: 0 50px;
text-align: center;
}
#Office365 img,#OneDrive img{
width:100px;
height: auto;
}
.num{
position: absolute;
top: 5px;
left: 5px;
}
<div class="row" id="firstAppRow">
<div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
<div><img src="https://png.icons8.com/color/1600/office-365.png" height="50px" width="50px" />
<p>Office365</p>
<span class="num">1</span>
</div>
</div>
<div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
<div><img src="https://bcpsodl.pbworks.com/f/1477585037/onedrive.png" height="40px" width="40px" />
<p>OneDrive</p>
<span class="num">2</span>
</div>
</div>
</div>
Try assigning
position: relative;
to the #Office365 and #OneDrive. Also put the images inside those divs.
Then assign
position: absolute;
left: 1px;
top: 1px;
to #Office365 span and #OneDrive span.
absolute vs float
.a {
width: 200px;
position: relative;
border: 1px solid gray;
margin-right:20px;
display:inline-block;
vertical-align:top;
}
.viaAbsolute {
position: absolute;
top:0;
left: 0;
padding: 3px;
border: 1px solid red;
}
.viaFloat {
float: left;
padding: 3px;
border: 1px solid red;
}
<div class="a">
<span class="viaAbsolute">
1
</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>
<div class="a">
<span class="viaFloat">
1
</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>
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 have chat window where I want to put photo and message next to photo. Conversation window must be responsive and message div auto-adjustable to the screen. But I can't find any way to do this, because once message has few lines of text, it drops to the next line.
If I use table, I can't make fixed-width photo TD. If I use DIVS, I can't do auto-width message DIV :)
Here is JSFiddle with an example:
https://jsfiddle.net/s95tdcLw/3/
HTML:
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit
</div>
</div>
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis.
</div>
</div>
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis. Nulla nulla est, feugiat vitae posuere et, efficitur ac justo. Suspendisse pulvinar, urna quis vehicula malesuada, lorem lacus luctus odio,
eu mattis nisi turpis vel lectus.
</div>
</div>
CSS:
.receiver {
clear: both;
padding-top: 1rem;
}
.receiverPhoto {
float: left;
width: 40px;
height: 40px;
background: blue;
border-radius: 20px;
}
.receiverMessage {
float: left;
width: auto;
background: rgb(230, 230, 230);
border-radius: 10px;
margin-left: 0.5rem;
padding: 10px;
}
Leave the float settings, use these instead:
.receiver {
position: relative;
}
.receiverPhoto {
position: absolute;
left: 0;
}
.receiverMessage {
margin-left: 45px;
}
jsFiddle
Your .receiverMessage element should not float and it should reserve left-margin space for the .receiverPhoto element.
.receiverMessage {
/* should not float */
width: auto;
background: rgb(230, 230, 230);
border-radius: 10px;
margin-left: 50px; /* reserve space of .receiverPhoto width */
padding: 10px;
}
See the forked Fiddle: https://jsfiddle.net/092b077c/
In response to your comment how to make it work for the opposite...
I'd use the classes on the wrapping div elements to determine the message type. In my example I introduce a new class .sender. Now I create four selectors that determine whether the photo element floats left or right and whether the message element has left or right padding:
New CSS:
.sender .receiverPhoto {
float: right;
}
.sender .receiverMessage {
margin-right: 50px;
}
.receiver .receiverPhoto {
float: left;
}
.receiver .receiverMessage {
margin-left: 50px;
}
HTML:
<div class="sender">
<div class="receiverPhoto"></div>
<div class="receiverMessage">...</div>
</div>
Now the .receiverPhoto and .receiverMessage styles do not need to declare margin or float.
See the updated Fiddle: https://jsfiddle.net/092b077c/1/