Anyone have solution for this i want to move div position via css on mouse hover move div down when i mouse over on div....
HTML
<div class="movediv">I Want to Move this div on hover via css</div>
<div class="testing">
<a class="Linktohover">Test</a>
<div class="showDiv">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
CSS
.showDiv {
position: absolute;
left: -9999px;
display: block !important;
font-size: 14px !important;
}
.testing:hover .showDiv {
left: 0px;
display: block !important;
}
.testing {
position: absolute;
top: 0px;
}
.movediv {
margin-top: 30px;
}
SEE DEMO
Like this types
DEMO
.container
{
position:absolute; bottom:0; right:0; left:0;
margin-right:auto; margin-left:auto;
width:50%; height:10%;
}
.a {position:absolute; bottom:0; left:20px; width:30%;}
.b
{
position:absolute; bottom:0; right:0; left:0;
margin-right:auto; margin-left:auto; width:30%;
}
.c {position:absolute; bottom:0; right:20px; width:30%;}
.b:hover ~ .a{
-moz-transform:translatex(-50px);
-ms-transform:translatex(-50px);
-o-transform:translatex(-50px);
-webkit-transform:translatex(-50px);
transform:translatex(-50px);
}
.b:hover ~ .c{
-moz-transform:translatex(50px);
-ms-transform:translatex(50px);
-o-transform:translatex(50px);
-webkit-transform:translatex(50px);
transform:translatex(50px);
}
Use
.movediv:hover { margin-top:30px;}
instead of
.movediv{ margin-top:30px;}
try this out
.showDiv{ position:absolute; left:-9999px; display:block !important; font-size:14px !important;}
.testing:hover .showDiv{ left:0px; display:block !important;}
.testing{ position:absolute; top:0px;}
.movediv{transition: width 2s,
-webkit-transition: width 2s, -webkit-transform 2000s;}
.movediv:hover{margin-left: 35px;
transform:rotate(0);
-webkit-transform:rotate(0); /* Safari */ }
and heres the ref for you
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition2
for smooth transitions
Related
How can I make this line(see picture) with CSS?
Using pseudo element as :after
div{
height:80px;
width:3px;
background:black;
border-radius: 23%;
position:relative;
}
div:after{
content:'';
height:3px;
width:170px;
background:black;
border-radius: 23%;
position:absolute;
top:47%;
}
<div></div>
No need complex code, one element and few CSS lines are enough:
.line {
width:200px;
height:100px;
border-left:5px solid;
background:linear-gradient(#000,#000) center/100% 5px no-repeat;
}
<div class="line">
</div>
Or like this:
.line {
width:200px;
height:100px;
padding:48px 0;
box-sizing:border-box;
border-left:5px solid;
background:#000 content-box;
}
<div class="line">
</div>
.line1 {
height:150px;
width:3px;
background:#000;
position:relative;
}
.line2 {
height:5px;
width:300px;
background:#000;
position:absolute;
/* following 2 code is excellent center for second line. */
top:50%;
transform:translateY(-50%);
}
<div class="line1">
<div class="line2"></div>
</div>
I have a problem with my website slider images. I set my slider wrap and slider inner frame width to 100% but when I change the screen size the images size does not change. Also I set the images width to max-width:100% and the height of them to auto.
#sliderFrame {
position:relative;
width:100%;
margin: 0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
width:1280px;height:auto;/* Must be the same size as the slider images */
border-radius: 6px;
}
#slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider div.loading {
max-width:100%; height:auto;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0;
z-index:9;
}
#slider img, #slider>b, #slider a>b {
position:absolute;
border:none;
display:none;
max-width:100%;
height:auto;
}
#slider div.sliderInner {
overflow:hidden;
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position:absolute;
top:0;
left:0;
max-width:100%;
height:auto;
}
<div id="sliderFrame">
<div id="slider">
<img src="image/Index_1600x500.jpg" alt="#cap1"/>
<img src="image/Index_TrackerPnale_1600x500.jpg"/>
<img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/>
<img src="image/Index_Support.jpg" title="Support Team"/>
<img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/>
</div>
</div>
Your CSS doesn't really say much about your HTML - Also, we have no clue on what you really mean by slider - But follow this fiddle: https://jsfiddle.net/p3r1x5sj/ and see the very minimal CSS you're looking for.
#sliderFrame {
width:100%;
height:100px;
position:relative;
}
#sliderFrame #slider {
width:100%;
height:100%;
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
box-shadow: 0px 1px 5px #999999;
}
#sliderFrame #slider img {
width:100%;
position:absolute;
top:0;
left:0;
}
The img tags are what you have to control. Also, unless you crop the images using overflow:hidden; on your outermost container, the images may be all different heights. In this case you may want to consider using divs with background-images
HTML FILE:
<div class="one">
<div class="two">
<h2>ITEM NAME</h2>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:50%;
height:325px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
}
.two{
position:absolute;
display:inline-block;
width:100%;
height:100%;
background-color: gray;
transition: all 0.3s ease-out;
}
.two h2{padding-top: 20%;}
I want to make a hover transition effect, just like this website:
Here
You can see in portfolio when you hover the link another light-blue div expands. I guess it's using transform: scale() I tried to do something like that, but the second div is overpassing the size of the parent div. How may I fix that? What am I doing wrong?
Also, I have my codepen sample.
The image of the lion you are using has a transparent background which appears along the edges, giving the impression that div one is actually smaller than it is. Set the background on the div one to a background colour instead of an image, and you will see what i mean.
i holp to help:
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:510px;
height:330px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
border:1px solid blue;
}
.two{
position:absolute;
display:block;
width:10%;
height:10%;
background-color: gray;
transition: all 0.3s ease-out;
margin-left:50%;
margin-top:30%;
opacity:0;
border-radius:100px;
}
.two h2{margin-top: 20%; margin-left:20%;}
.one:hover .two{
display:inline-block;
opacity: 1;
width:100%;
height:100%;
-webkit-transform: scale(1);
margin:0px !important;
border-radius:2px !important;
}
Sorry for my english.
I have a problem. I need to create a DIV inside another DIV, which has to have a white background. I tried using skew, but It didnt work well.
Here is an image:
There are at least several ways to achieve this, however the simplest way may be using linear-gradient background. Its quality is not really good compared with others but it's totally acceptable.
Try this:
div {
width:600px;
height:300px;
background:teal;
border:1px solid teal;
}
.top {
width:100%;
height:100px;
font-size:25px;
padding-left:30px;
background:linear-gradient(175deg, white 60%, transparent 62%);
border:none;
box-sizing:border-box;
}
HTML:
<div>
<div class='top'>Custom<br/>Home</div>
</div>
Demo.
You can do that with a pseudo element and transform rotate :
DEMO
HTML :
<div id="header">
Custom<br/>
Home
</div>
<div id="content"></div>
CSS :
#header{
background:#fff;
position:relative;
height:50px;
z-index:1;
font-size:30px;
padding-left:10%;
}
#header:before{
content:'';
position:absolute;
bottom:0;
right:0;
width:110%;
height:1000%;
background:inherit;
z-index:-1;
border-bottom:2px solid #636A6E;
-webkit-backface-visibility: hidden; /* to fix pixelisation in chrome */
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
#content{
min-height:500px;
background:#778385;
}
Since you need the border in your diagonal div, try this:
CSS:
.logo {
width:110%;
height:147px;
top:-10%;
left:-14px;
border:2px solid black;
position:absolute;
background:#fff;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
/* IE 9 */
-webkit-transform:rotate(-7deg);
/* Opera, Chrome, and Safari */
}
.container {
width:100%;
height:612px;
overflow:hidden;
background:#7b8284;
position:relative;
}
.inner {
position:absolute;
height:200px;
transform:rotate(7deg);
-ms-transform:rotate(7deg);
/* IE 9 */
-webkit-transform:rotate(7deg);
/* Opera, Chrome, and Safari */
padding:20px 90px;
top:30%;
font-size:30px;
}
HTML:
<div class="container">
<div class="logo">
<div class="inner">My Logo</div>
</div>
</div>
Demo: http://jsfiddle.net/lotusgodkk/BKfe9/1/
You can modify the top,left,font-size,background-color,transform, border as per your need
If you want to do it in pure CSS I would recommend using the transform: rotate(xxx) feature of CSS3. I've created a JS-Fiddle that will help you get started (not the best solution...), it is not based on your fiddle: http://jsfiddle.net/syTu7/
I think I understand your question, I think my example will help
HTML
<div class="wrapper">
<div class="innter">some text</div>
</div>
CSS
.wrapper {
position: relative;
width: 960px;
margin: 0 auto;
background: #ddd;
min-height: 100%;
height: 800px;
}
.innter {
height: 500px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #ececec;
}
In HTML,
<div class="wrapper">
<div class="inner">some content</div>
</div>
In CSS,
.inner {
background: #fff;
}
The website I´m currently working on is this: www.ernestoblancarte.com
Its a fluid layout and it works fine in Chrome and Explorer, but when trying it in Safari the proportions crush, i cant get it to work in both browser, please help.
Here is the css:
Thanks in advance.
body{
background:#FFF;
font-family:"futuraLT";
color:#FFF;
word-spacing:-3px;
}
body, html {
width:100%;
padding:0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#Background{
position: absolute;
margin:0;
z-index:0;
}
#Barra{
}
#Logo{
z-index:1;
position:absolute;
bottom:18.9259%;
margin-left:17.12083%;
margin-right:71.166%;
border-style:none;
}
#Center{
height:85%;
}
#Banner4{
margin-top:0px;
margin-left:43.672%;
margin-right:20.8854%;
position:absolute;
}
#Banner3{
max-width: 100%;
margin-top:11.65%;
margin-left:20.8854%;
margin-right:41.5625%;
position:absolute;
}
#Banner2{
margin-top:23.2744%;
margin-left:43.672%;
margin-right:20.8854%;
position:absolute;
}
#Banner1{
margin-top:34.75%;
margin-left:20.9634%;
margin-right:46.35416%;
position:absolute;
}
#BarrTXT{
position:absolute;
z-index:3;
margin-top:47.12511%;
width:100%
}
#Menutxt{
position:absolute;
left:30.5208%;
top: 30%;
width:4%;
margin:0 auto;
}
#Menutxt2{
width:5%;
position:absolute;
left:38.125%;
top:16%;
}
#Menutxt3{
width:4%;
position:absolute;
left:46.875%;
top:30%;
}
#Menutxt4{
width:4%;
position:absolute;
left: 57.38166%;
top: 30%;
}
#Menutxt5{
width:4%;
position:absolute;
left: 68.333%;
top: 30%;
}
maybe its:
margin-top: calc( 100vw * .1165 );
But I also don't see
position: relative
on any containing elements of the absolutely positioned elements