Here is a simple Js slider, and need to make it responsive for mobiles. But when i apply max-width to #slider and #image it hides whole div element. For example default width should be 500pxl and 300pxl height. For wide screen. It should automatically resize depend on mobile and tablet screen width. Is it possible?
html:
<body onLoad="photoA()">
<div id="slider">
<img src="Images/img1.jpg" id="image" >
<img onClick="photo(-1)" class="left" src="Images/arrow_left.png">
<img onClick="photo(1)" class="right" src="Images/arrow_right.png">
</div>
css:
*{
margin:0px;
}
#slider {
height:350px;
max-width:500px;
margin: 5px auto;
position:relative;
border-radius:4px;
overflow:hidden;
}
#image {
height:350px;
width:500px;
position:absolute;
}
.left {
height:50px;
width:50px;
position:absolute;
top:40%;
left:10px;
opacity:1;
transition: all .2s ease-in-out 0s;
}
.right {
height:50px;
width:50px;
position:absolute;
top:40%;
right:10px;
opacity:1;
transition: all .5s ease-in-out 0s;
}
.right:hover , .left:hover {
opacity:0.6; cursor: pointer;
}
What is the reason for positioning your main image absolutely? It will only make your life miserable.
If you make the following changes, you'll get the desired result:
#slider {
width: 100%;
max-width:500px;
height: auto;
margin: 5px auto;
position:relative;
border-radius:4px;
}
#image {
width: 100%;
height: auto;
}
To make your slider look even better, I suggest that you also use:
.left {
height:50px;
width:50px;
position:absolute;
top:50%;
transform: translateY(-50%);
left:10px;
opacity:1;
transition: all .2s ease-in-out 0s;
}
.right {
height:50px;
width:50px;
position:absolute;
top:50%;
transform: translateY(-50%);
right:10px;
opacity:1;
transition: all .5s ease-in-out 0s;
}
Note: The div disappeared because you cannot set max-width to the parent when all its children are positioned absolutely With no widths and heights or max-widths and max-heights (They behave as if they had the values not set).
Related
In this code when, when rotating along top left point , the bar sways a lil bit down , while rotating
have seen this multiple time , sometimes it gets fixed , but i cannot spot the diff.
#keyframes rightup{
100%{
transition:transform 1s linear;
transform-origin:top left;
transform:rotate(-50deg);
}
}
.box{
position:absolute;
height:10px;
width:150px;
background-color:black;
top:50%;
left:50%;
border-radius:5px;
animation-name:rightup;
animation-duration:5s;
}
<div class="box"></div>
wanted something like this
.box{
position:absolute;
height:10px;
width:150px;
background-color:black;
top:50%;
left:50%;
border-radius:5px;
animation-name:rightup;
animation-duration:5s;
}
.box:hover{
transition:transform 1s linear;
transform-origin:top left;
transform:rotate(-50deg);
}
<div class="box"></div>
In the animation you aren't setting the transform-origin to the left top right from the start, but you are doing so in the transition/transform example.
Also, a minor point for such a slim bar but it makes a slight difference, you are rotating about the top of the bar rather than the (vertical) center.
This snippet changes both these things:
#keyframes rightup {
0% {
transform-origin: center left;
}
100% {
transform-origin: center left;
transform: rotate(-50deg);
}
}
.box {
position: absolute;
height: 10px;
width: 150px;
background-color: black;
top: 50%;
left: 50%;
border-radius: 5px;
animation-name: rightup;
animation-duration: 5s;
}
<div class="box"></div>
I'm working on this project here:
https://codepen.io/WHITE-RABBIT/pen/aMzLWy
I've got pretty much everything in place, but when I use zoom to check that my elements stay in place, I find that all of my content shifts downward. The widths pretty much remain the same, but the headers seem to cause some space and also for the life of me I cannot get my links container to not change size. I know there is probably a fairly simple solution for this, but I have been wracking my brain for hours and I just cannot think of what I did wrong here.
I will split this into sections.
Header:
/**HEADER SECTION**/
.header
{
width:100%;
height:5vmin;
max-height:5vmin;
left:0vmin;
top:0vmin;
margin-top:0vmin;
position:relative;
pointer-events:auto;
z-index:30;
background-color:RED;
}
.header h1
{
font-family:Barlow;
font-size:2vmin;
color:#9dc7ff;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.5vmin;
margin-top:1vmin;
position:relative;
display:inline-block;
background-color:GREEN;
}
.header u
{
text-decoration:none;
font-size:2vmin;
letter-spacing:0.1vmin;
font-weight:100;
font-style:italic;
font-family:'Black Han Sans', sans-serif;
color:#ff6ade;
}
.header-links
{
width:70%;
height:auto;
padding-top:0%;
margin-top:-3.5vmin;
margin-left:24.2vmin;
right:0%;
position:fixed;
float:right;
background-color:BLUE;
}
.header-links a
{
font-family:Roboto;
font-size:1.02vmin;
letter-spacing:0.2vmin;
width:auto;
height:auto;
position:relative;
padding-bottom:2vmin;
padding-top:0vmin;
color:WHITE;
margin-right:2vmin;
text-decoration:none;
text-transform:uppercase;
display:inline;
border-bottom:0vmin solid RGBA(255,255,255,0.0);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.header-links a:hover
{
border-bottom:2px solid #2de3ff;
color:#ff2dce;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.header span
{
display:inline-block;
width: 0.5vmin;
max-width:0.5vmin;
max-height:0.5vmin;
height: 0.5vmin;
top:-0.1vmin;
margin-right:2vmin;
position:relative;
background-color:#2de3ff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
Sider:
.sider
{
width:29%;
height:80vmin;
position:relative;
z-index:2;
margin-top:-7vmin;
pointer-events:auto;
background-color:TRANSPARENT;
}
.sider display
{
height:40%;
width:100%;
top:8vmin;
position:relative;
display:inline-block;
background-image:URL('https://i.imgur.com/KrGRmvE.gif');
background-size:cover;
background-position:center;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 10% 10% 10% 10%;
}
.title
{
height:4vmin;
width:90%;
left:1vmin;
position:relative;
display:inline-block;
top:9vmin;
font-family:Barlow;
font-size:1.9vmin;
line-height:1.2vmin;
}
.sider desc
{
height:auto;
width:95%;
left:1vmin;
top:10vmin;
position:relative;
display:inline-block;
font-family:'Roboto Condensed', sans-serif;
font-size:1.3vmin;
font-weight:100;
line-height:1.5vmin;
opacity:0.8;
text-align:justify;
letter-spacing:0.03vmin;
}
.title icon
{
height:8vmin;
width:8vmin;
max-height:8vmin;
max-width:8vmin;
display:inline-block;
position:relative;
margin-top:-4vmin;
margin-right:1vmin;
left:0vmin;
float:left;
background-color:PURPLE;
background-image:URL('https://i.redd.it/glxbid0p79r11.jpg');
background-size:cover;
border:0.5vmin solid BLACK;
-webkit-border-radius: 50%px;
border-radius: 50%;
}
.buttons-container
{
height:auto;
width:100%;
margin-top:13vmin;
white-space:nowrap;
font-family:Roboto;
line-height:0vmin;
text-transform:uppercase;
}
.button
{
height:2.3vmin;
width:2.3vmin;
max-height:2.3vmin;
max-width:2.3vmin;
margin-right:1vmin;
display:inline-block;
background-image:URL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217361/discord-icon-free-download-at-icons8-33230.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
.button2
{
height:2.3vmin;
width:2.3vmin;
margin-right:1vmin;
display:inline-block;
background-image:URL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217361/kisspng-league-of-legends-computer-icons-riot-games-wall-decals-5b11738fe19235.371578411527870351924.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
.buttons-container span
{
top:-0.8vmin;
margin-right:1vmin;
display:inline-block;
position:relative;
background-color:GREEN;
font-size:1vmin;
}
The HTML section can be seen on the pen. I'm not going to post it because I am 99% sure that it has nothing to do with my HTML.
I appreciate everyone's time. Hopefully I can find a solution to this soon. Thank you.
Your design isn't responsive, you're working with your screen size only but when the design is displayed in another screen everything will not be the same as it was in your screen
You can follow this guide to get better results
I am trying to use simple transiton, but I don't understand why it is not working. Could you help me? I put transition: ease-in-out; in container...
my code:
.container{
width:250px;
height:300px;
background:#00f;
position:relative;
transition: ease-in-out;
}
.show{
display: none;
position:absolute;
bottom:0;
height:50%;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
}
.container:hover > .show{
display:block;
}
http://jsfiddle.net/mAzsL/44/
I use this as example: http://jsfiddle.net/n7Ne9/53/
UPDATE:
My aim was to get effect which is called 'fade in a box' - I wasn't precise, sorry.
Update:
On new requirements, the transition effect needs to be different, please refer the below snippet.
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
opacity:0;
height:30%;
bottom:0px;
left:0px;
right:0px;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: opacity 0.5s ease-in-out;
}
.container:hover>.show {
opacity:1;
}
<div class="container">
<div class="show">Lorem </div>
</div>
Old Answer:
The problem is transition property cannot be applied to the CSS property display:none, the workaround for this is to set the height to 0px initially, a problem you will face is that the text will still be visible on the screen. For this overflowing text to be hidden, use the CSS class overflow:hidden which will hide the content which is outside the element. Also instead of using transition on the parent element, use it directly on the element itself. Refer the below class.
.show{
position:absolute;
overflow:hidden;
bottom:0;
height:0px;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
transition: height 1s ease-in-out;
}
The transition property should be as follows.
transition: height 1s ease-in-out;
First mention which property should have the transition effect. Then duration of the transition, then whether ease-in or some other setting.
Then on hover, set the original height. The transition will be seen.
.container:hover > .show{
height:50%;
}
.container {
width: 250px;
height: 300px;
background: #00f;
position: relative;
}
.show {
position: absolute;
overflow: hidden;
bottom: 0;
height: 0px;
width: 100%;
color: #000;
text-indent: 5px;
background: rgba(255, 255, 255, .5);
transition: height 1s ease-in-out;
}
.container:hover>.show {
height: 50%;
}
<div class="container">
<div class="show">Lorem </div>
</div>
What I'm trying to achieve is a fake loading message as the user hovers over the div before it shows the actual div content.
.info { opacity: 0; width: 200px; height: 300px;transition-duration: 0.3s; transition-delay: 2s; margin-top: -20px; background-color: #000;}
.info:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 2s; }
.access {opacity: 0.0; transition-duration: 0.3s; transition-delay: 0.5s; background-color: #000; color: #fff}
.access:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 0.5s; }
http://jsfiddle.net/499hM/
As you can see, the message appears and then the div but the message reappears over the top of the div and fades it out - I want the message to disappear once the div has "loaded". I'm hoping this can be achieved through CSS alone?
you canuse the adjacent selector and set 2 transitions on 2 different child of your boxe.
the .loading message first in flow, once hovered shows up and the next child (+ .infos) will show up on top of it a little while after. from there, the .infos takes over the :hover to keep on top.
DEMO:
http://codepen.io/gc-nomade/pen/jilLp
<div>
<p class="loading">
loading ...
</p>
<p class="infos">
Infos
</p>
</div>
div {
border:solid;
width:200px;
height:200px;
border:gray solid 5px;
margin:auto;
text-align:center;
position:relative;
}
.loading , .infos{
position:absolute;
top:0;
left:0;
margin:0;
height:100%;
width:100%;
line-height:200px;
background:black;
color:white;
z-index:5;
opacity:0;
}
.infos {
z-index:0;
background:yellow;
line-height:1.2em;;
color:red;
}
.loading:hover {
opacity:1;
}
.loading:hover + .infos, .infos:hover {
opacity:1;
transition:2s 1s;
z-index:10;
}
i have an image in my website that when i mouse over it this goes left 105px:
.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s;
}
.view:hover img{
left: -105px;
}
i want to divide this "view" into 2 segments horizontally that every segment works different ,when mouse over one segment of the image then image goes left in 105px and another segment do it in another direction (right).i means writing something like this:
.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s;
}
.view:hover 25% right img{
left: -105px;
}
.view:hover 25% left img{
right: 105px;
}
how can i do this?
you can use :before and :after from css3
markup:
<div>hallo JAPAN</div>
style:
div{
position:relative;
width:100px;
height:80px;
background-color:#ccc;
margin:100px auto;
}
div:before,div:after{
content:'';
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
opacity:0;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
div:before{
background-color:red;
background-image:url(http://www.marcwitteveen.com/wp-content/uploads/2013/01/apple-logo.png);
background-repeat:no-repeat;
background-position:center;
}
div:after{
background-color:red;
background-image:url(http://mywindows8themes.com/wp-content/uploads/2011/11/windows_8_metro_logo.png);
background-repeat:no-repeat;
background-position:center;
}
div:hover:before{
left:-100%;
}
div:hover:after{
left:100%;
}
div:hover:before,div:hover:after{
opacity:1;
}
like this http://jsfiddle.net/nXdMn/