Trying to experiment with a responsive design. But using a bad resolution screen isn't helping. On my main screen it looks fine, they are all in line and if I shrink the browser the elements shrink into the min and max size.
On my main screen (1366 x 768) the segment looks like this:
However on another resolution (1280 x 720) it distorts:
Here is my CSS:
//Thumbnails
#menu {
text-align: center;
}
.fader {
/* Giving equal sizes to each element */
//width: 250px;
//height: 375px;
//width: 33%;
//height: 55%;
max-width: 250px;
max-height: 375px;
min-width: 125px;
min-height: 188px;
/* Positioning elements in lines */
display: inline-block;
/* This is necessary for position:absolute to work as desired */
position: relative;
/* Preventing zoomed images to grow outside their elements */
overflow: hidden; }
.fader img {
/* Stretching the images to fill whole elements */
width: 100%;
height: 100%;
/* Preventing blank space below the image */
line-height: 0;
/* A one-second transition was to disturbing for me */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease; }
.fader img:hover {
/* Making images appear bigger and transparent on mouseover */
opacity: 0.5;
width: 120%;
height: 120%; }
.fader .text {
/* Placing text behind images */
z-index: -10;
/* Positioning text top-left conrner in the middle of elements */
position: absolute;
top: 50%;
left: 50%; }
.fader .text p {
/* Positioning text contents 50% left and top relative
to text container's top left corner */
margin-top: -50%;
margin-left: -50%;
}
I am trying to make it so that no matter what resolution the third image doesn't drop down to another line. It should just shrink
Thank you for reading.
Try This:
HTML
<body>
<div class="wrapper">
<div class="first">
<img src="img/CourseExample1.png">
</div>
<div class="second">
<img src="img/CourseExample2.png">
</div>
<div class="third">
<img src="img/CourseExample3.png">
</div>
</div>
</body>
CSS
body{
margin: 0;
padding: 0;
}
.wrapper{
margin:0px auto;
width: 100%;
}
.first{
width:33%;
float: left;
}
.second{
width:33%;
float:left;
}
.third{
width:33%;
float:left
}
.wrapper img{
width:95%;
}
Related
Here is a link to a demo
I'm not sure what I'm missing, I've done this before a few times but It's been a day of fighting this particular CSS. I want the image to enlarge, but stay within the dimensions, so a zoom effect versus any enlargement. I've attempted to move the overflow:hidden into other parent or children, but it doesn't have an effect. I've played around with the display settings as well.
Any advice? The JSfiddle link is above, and the code below. Thanks for taking a look!
#purple-square {
width: 355px;
height: 255px;
background-image: url("../img/website_cards/purple_card.png");
border-radius: 10px;
}
#migraine-dentistry {
width: 355px;
height: 255px;
background-image: url("../img/website_cards/migraine_dentistry_card.png");
border-radius: 10px;
}
/* need position: relative in shell otherwisee the elements disappear */
#shell {
margin: auto;
width: 355px;
height: 255px;
position: relative;
transform-origin: center;
transition: 0.3s ease-in-out;
}
#shell:hover {
transform: scale(1.2);
}
#container {
width: 100%;
overflow: hidden;
display: inline-block;
transition: 0.3s;
margin: 0 auto;
}
#container div {
position: absolute;
left: 0;
transition: 0.3s ease-in-out;
}
#container:hover {
transition: ease-in-out 0.3s;
}
#container div.bottom:hover {
opacity: 0;
}
and here is the HTML setup:
<body>
<div id="shell">
<div id="container">
<div id='purple-square' class="top"></div>
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
Full working code snipped below my steps
remove unnecessary elements Removed purple square, because it's never seen in wanted animation.
Removed the part the full #container div.bottom:hover part.
Removed every style that begins with #shell in the css and later trigger the animation on #container:hover.
main issue Add an #migraine-dentistry after the #container:hover animation, so if someone hovers the container it effects the #migraine-dentistry element. (#container:hover #mi.. {trans..})
In this (#container:hov..) element remove everything and
insert transform: scale(1.2);
because we just want to scale if user is hovering.
Remove whole #container div {..} style element, because we will directly add these styles to the #migraine-dentistry element.
In #container define px values for
> width: 355px; and height: 255px;
just because we not use the #shell element anymore. Also
> set position: relative; and z-index: 2;
that the #migrain.. element is inside his parent. And
> set border-radius: 15px;
for styling. Finally
>remove the display and transition values
because they are simply not needed.
last In #migraine-de.. styles
>set width: 100%; and height: 100%;
to fit div to parent.
> remove border-radius tag
because it's set by the #container
> add transition: 0.3s ease-in-out;
to transition like you wanted.
#container {
border-radius: 15px;
width: 355px;
height: 255px;
overflow: hidden;
z-index: 2;
position: relative;
}
#container:hover #migraine-dentistry {
transform: scale(1.2);
}
#migraine-dentistry {
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
background-image: url('https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
}
<body>
<div id="shell">
<div id="container">
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
I know these long nights where you just can't get it done.
I was able to transition text-align from center to left. With this code, if you run it, then hover over, you'll see the top one goes to the left. However the bottom overflows on the right; how can I figure out how to make the transition to right not overflow?
Note: This is a demo of my real application, which has strings/elements of unknown/variable width, from 1 to anything to fill a single line (no wrapping).
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title {
text-align: center;
}
.menu {
text-align: center;
}
.trans-left {
transition: margin-right 1s;
}
.trans-right {
transition: margin-left 1s;
}
.header:hover .trans-left {
margin-right: 100%;
}
.header:hover .trans-right {
margin-left: 100%;
}
<body>
<div class='header'>
<div class='title'>
<span class='trans-left'>This one goes left</span>
</div>
<div class='menu'>
<span class='trans-right'>This one goes right</span>
</div>
</div>
</body>
You're aligning the text elements like this:
margin-left: 100%;
margin-right: 100%;
This positions each element – from the starting point of the box – to the left and right edges.
Hence, the left edge of the left-moving box will align with the left edge of the container.
And the left edge of the right-moving box will align with the right edge of the container. This causes the rest of this box to overflow.
Try this instead:
margin-right: 90%; /* adjust as needed */
Edit based on revised question
Here is an alternative solution that works regardless of content width.
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title, .menu {
text-align: center;
position: relative;
width: 100%;
height: 50px;
}
.trans-left {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: 1s;
}
.trans-right {
position: absolute;
right: 50%;
transform: translateX(50%);
transition: 1s;
}
.header:hover .trans-left {
left: 0;
transform: translateX(0);
transition: 1s;
}
.header:hover .trans-right {
right: 0;
transform: translateX(0);
transition: 1s;
}
<div class="header">
<div class="title">
<span class="trans-left">This one goes left</span>
</div>
<div class="menu">
<span class="trans-right">This one goes right</span>
</div>
</div>
More details: Element will not stay centered, especially when re-sizing screen
So i'm trying to change the hover effect of my divs. When I started the project I had it just the way I want it now, but back then I didn't want it that way, so I changed it. Now I can't seem to change it back.
so here is my code,
HTML
<div id="left">
<div id="leftImage">
//the background image
</div>
<div id="overlayLeft">
//a logo that goes on top of the image when not hovering over it
</div>
</div>
<div id="right">
<div id="rightImage">
//the background image
</div>
<div id="overlayRight">
//a logo that goes on top of the image when not hovering over it
</div>
</div>
CSS
body {
background: #ffff;
}
/* Setup for the halves of the screen */
#right
{
/* Set rules to fill background */
min-height: 100%;
min-width: 50%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
position: fixed;
top: 0;
right: 0;
background: #389A7A;
background-size:cover;
}
#left
{
/* Set rules to fill background */
min-height: 100%;
min-width: 50%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
position: fixed;
top: 0;
left: 0;
background: #0C4270;
background-size:cover;
}
/* Setup for the image containers */
#rightImage, #leftImage
{
opacity:1.00;
filter: alpha(opacity=100); /* For IE8 and earlier */
background: rgba(0, 0, 0, 0.15);
-webkit-transition: opacity 2.00s ease;
-moz-transition: opacity 2.00s ease;
transition: opacity 2.00s ease;
position: relative;
}
#rightImage:hover, #leftImage:hover
{
opacity:0.15;
filter: alpha(opacity=15); /* For IE8 and earlier */
background: rgba(0, 0, 0, 1.0);
}
#rightImage:hover + #overlayRight, #leftImage:hover + #overlayLeft
{
visibility: visible;
-webkit-transition: visibility 0.5s ease;
-moz-transition: visibility 0.5s ease;
transition: visibility 0.5s ease;
}
/* Setup for the images */
.rightImage
{
/* Set rules to fill background */
min-width: 50%;
min-height: 100%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0px;
right: 0;
}
.leftImage
{
/* Set rules to fill background */
min-width: 50%;
min-height: 100%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0px;
left: 0;
}
/* Setup for the logo image */
#overlayLeft
{
visibility: hidden;
}
.overlayLeft
{
/* Set rules to fill background */
min-width: 40%;
/* Set up proportionate scaling */
width: 40%;
/* Set up positioning */
position: absolute;
top: 35%;
left: 30%;
pointer-events: none;
}
#overlayRight
{
visibility: hidden;
}
.overlayRight
{
/* Set rules to fill background */
min-width: 40%;
/* Set up proportionate scaling */
width: 40%;
/* Set up positioning */
position: absolute;
top: 40%;
right: 30%;
pointer-events: none;
}
And here is the code in action: JsFiddle
So what i want to achieve is that when I hover the left div the effect that now happens ons the left div must happen on the right div. The piece of code that is making the hovering work is this the piece below:
#rightImage:hover, #leftImage:hover
{
opacity:0.15;
filter: alpha(opacity=15); /* For IE8 and earlier */
background: rgba(0, 0, 0, 1.0);
}
I tought one of the following operators would work: "+", "~", or just a simple space between :hover and the next div (#rightImage:hover #leftImage).
Yet I cannot seem to get it to work..
What am I doing wrong? Is it that the elements doesn't have the same parent? I tried adding a parent div arround the whole html. Yet that didn't work.
As far as I am aware hover states can only affect the element being hovered or child elements. You'll need to use some light javascript to achieve this.
You should be able to wrap both your #left and #right div's and then apply the hover style to that element. Like this:
<div class="wrapper">
<div id="left"> ... </div>
<div id="right"> ... </div>
</div>
and then ...
.wrapper:hover #rightImage, .wrapper:hover #leftImage{
opacity:1.00;
filter: alpha(opacity=100);
/* For IE8 and earlier */
background: rgba(0, 0, 0, 1.0);
}
See this fiddle.
I was wondering what would be the most efficient way to place a rotated text directly outside the image's top left corner? Please keep in mind that I would like it if the height of the text box aligns with the height of the image, and the image scale will vary (tall images, short image, wide images, etc.)
Here is a visual of what I would like to achieve:
How might I do this? Thank you in advance!
Whoops, forgot to add the jsfiddle. You can view it here!
.image.information {
display:block;
position:absolute;
margin:0;
top:45%;
left:100%;
height:100%;
-webkit-transition:all 250ms linear;
-o-transition:all 250ms linear;
transition:all 250ms linear;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.image-wrap {
height: 100%;
width: 100%;
display: block;
}
.image-inner img {
width: 500px;
height: auto;
display: block;
}
<div class="image-wrap">
<img class="image-inner" src="http://i.stack.imgur.com/YyMHW.jpg" alt="" />
<div class="image information">
information<br/>
informa<br/>
info
</div>
</div>
This is possible using CSS3 transforms, but requires an extra element in your DOM:
<div class="image-wrap">
<img class="image-inner" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/08/korea5b.jpg" alt="" />
<div class="image information">
<div class="info-inner">
information
<br/>informa
<br/>info
</div>
</div>
</div>
Now with some absolute-positioning magic:
.image.information {
position:absolute;
left: 0;
top: 0;
bottom: 0;
width: 75px;
background: #ccc;
}
.info-inner {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top:-75px;
margin-left: -75px;
height:55px;
width: 150px;
vertical-align: bottom;
transform: rotate(90deg);
}
.image-wrap {
height: 100%;
width: 100%;
position: relative;
}
img.image-inner {
width: 300px;
margin-left: 75px;
}
Note that there's no simple way to have vertically-centered text without specifying an explicit text height. In this case I have chosen 55px. It will stretch to match the height of any image you specify.
JSFiddle: http://jsfiddle.net/zephod/ckqcLsbv/2/
<div class="wrapper">
<div class="avatar"></div>
<div class="desc an-all"></div>
</div>
<div class="wrapper">
<div class="avatar"></div>
<div class="desc an-all"></div>
</div>
.wrapper{
position: relative;
width: 250px;
height: 150px;
cursor: pointer;
}
.wrapper:hover .desc{
opacity: 1;
}
.avatar{
width: 70px;
height: 70px;
background: green;
position: relative;
z-index: 30;
}
.desc{
position: absolute;
top: 50px;
left: 0;
height: 250px;
width: 100%;
background: red;
opacity: 0;
z-index: 20;
}
.an-all{
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
I can't figure out why is this happening. I thought that a position element inside a parent with position relative only apply inside parent and outside is a different world.
Why when I hover the green box of the first wrapper div the red one don't overlay the second's wrapper div green box ? I want the red box to be under the green one when I hover
http://codepen.io/laxmana/pen/txKbF
See if you like this example:JSFiddle
It uses your same working code, but the wrapper divs are placed within a relative parent, and each are given their own z-index. This is how you can layer one on top of another. In a real world example, the divs may not be together (like a tooltip), and then you wouldn't need the additional parent. The parent is useful when the divs are together, and on the same level. Play around with the JSFiddle, and try different options with content.
In the original example, the reason the green divs were always on top, regardless of their html order, is because the red divs are absolutely positioned, and the 2 wrapper elements are on the same level within the parent.
.wrapper {
position: relative;
width: 250px;
height: 150px;
cursor: pointer;
}
.wrapper:hover .desc {
opacity: 1;
}
.relative-container {
position:relative;
}
.top {
z-index:10;
}
.bottom {
z-index:9;
}
.avatar {
width: 70px;
height: 70px;
background: green;
position: relative;
z-index: 30;
}
.desc {
position: absolute;
top: 50px;
left: 0;
height: 250px;
width: 100%;
background: red;
opacity: 0;
z-index: 20;
}
.an-all {
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
Update
Here is an example with multiple display:inline-block divs. The trick is for the z-index to work, the divs need to be siblings/on the same level as each other (this works for other elements too). The first div in the row that needs to go on top gets the highest z-index, while the last div gets the lowest z-index.
JSFiddle Example
Here is a great resource explaining the details on the z-index https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Note: In the second JSFiddle I used display:none on the red ".desc" dropdowns, and made them visible only when moused over by adding display:block; to ".wrapper:hover .desc". In your original code even though you don't see the red divs, when you hover over their invisible area it triggers them to show. By using display:none, they are truly not displayed in the page and therefore can't trigger the hover state. The trick is that display:block overwrites the display:none in the hover class, so they will show when the green buttons are hovered over.
This hides the red divs:
.desc {
display:none;
This shows the red divs only when the green divs are hovered over:
.wrapper:hover .desc {
display:block;
Your z-index needs to change. Right now, both red boxes have an index lower than the green, which is why it appears beneath the second green box.
Update
Based on your comment, you want to have the green box both underlay the avatar class and overlay the same class below the wrapper. Because you're using classes alone, you can't have both actions. You could space the wrappers differently so you have the description still underlay the avatar and not overlap lower elements.
CSS
.wrapper{
position: relative;
width: 250px;
height: auto; /* Set this to auto to keep elements separate from one another */
cursor: pointer;
}
.wrapper:hover .desc {
opacity: 1;
}
.avatar{
width: 70px;
height: 70px;
background: green;
position: relative;
z-index: 30;
}
.desc{
position: relative; /* Keep it inside the document flow */
top:-20px; /* sets the overlap from the avatar class */
left: 0;
height: 250px;
width: 100%;
background: red;
opacity: 0;
z-index: 20; /* Displays below the avatar */
}
.an-all{
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
Working pen