This is the current code I made, the rotations and animations are okay, but I can't make a hover text in the image of the planet or the orbit of the planet.
<html>
<head>
<style>
body {
background-image: url(bg.jpg);
background-size: cover;
}
I can't make a hover with this while the planets were animating.
.sun {
left:700px;
top:300px;
height: 170px;
width: 170px;
background-image: url("sun.png");
background-repeat: cover;
background-size: 100%;
position: absolute;
margin: 0;
}
the planet or the orbit of the planet when you hover it, it should show the text or the name of the planet itself.
.mercury {
left:680px;
top:343px;
height: 40px;
width: 40px;
background-image: url("mercury.png");
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
transform-origin: 280% 90%;
animation: rotate 1.5s infinite linear;
}
.mercuryOrbit {
left:690px;
top:285px;
height: 190px;
width: 190px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
margin: 0px;
padding: 0px;
}
.venus {
left:600px;
top:330px;
height: 50px;
width: 50px;
background-image: url("venus.png");
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
transform-origin: 370% 80%;
animation: rotate 3.84s infinite linear;
}
.venusOrbit {
left:620px;
top:210px;
height: 330px;
width: 330px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
margin: 0px;
padding: 0px;
}
.earth {
left:535px;
top:300px;
height: 70px;
width: 70px;
background-image: url("earth.png");
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
transform-origin: 350% 100%;
animation: rotate 6.25s infinite linear;
}
.earthOrbit {
left:570px;
top:160px;
height: 430px;
width: 430px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
margin: 0px;
padding: 0px;
}
#keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class=“solarsys”>
<div class="sun"></div>
<div class="mercuryOrbit"></div>
<div class="mercury"></div>
<div class="venusOrbit"></div>
<div class="venus"></div>
<div class="earthOrbit"></div>
<div class="earth"></div>
</div>
</body>
</html>
How can I add hover effect on the image so that the name of the planet will show? I don't know how to add it.
This issue may stem from the orbits overlapping on your planets. Try adding z-index : 1 for example to one of your planet class and test the hovering again.
Here is an example:
.mercury {
/* rest of your class here */
position: relative;
z-index: 1;
}
.mercury::after {
content: "Hello world";
position: absolute;
font-size: 0.8rem;
background-color: #3f3f3f;
border-radius: 3px;
padding: 0.2rem;
bottom: 100%;
left: 0;
color: white;
display: none;
}
.mercury:hover.mercury::after {
display: block;
}
For more informations on z-index:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Related
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
.fullscreen {
height: 100%;
width: 100%;
background: no-repeat url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg') center / cover;
}
.line_horiz {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.line_vert {
position: absolute;
width: 100%;
height: 3px;
background-color: rgba(255, 255, 255, 1);
top: 20%;
left: 0;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line_vert"></span>
<span class="line_horiz"></span>
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
As the horizontal and vertical lines are styling rather than informational content one suggestion is to remove them from the body of the HTML and instead create them using linear gradients on the background of the fullscreen element. That way they don't for example get looked at by screen readers. Also, using linear gradients means we can have 'gaps' in the lines where we want them.
This snippet just does the calculation of the gap for the btn element as the logo element has background white so it doesn't matter that the 'line' goes right across. If this changes then put in a linear gradient with gap calculations in a similar way to that done for the btn.
Note, box-sizing with content has been used and explicitly stated (so borders are included in the calculations and padding is set to zero) in case it has been altered elsewhere in the code.
body {
width: 100vw;
height: 100vh;
}
.fullscreen {
/* set up some variables to make it easier to change things later if you want to */
--logoMid: calc(20% - var(--borderW));
--btnW: 100px;
--btnMid: 50%;
/* position from the top to the middle of the btn */
--borderW: 3px;
--btnTop: calc(var(--btnMid) - (var(--btnW) / 2) - (var(--borderW) / 2));
/* actual position of top of btn element */
--btnBottom: calc(var(--btnTop) + var(--btnW) + var(--borderW));
box-sizing: content-box;
height: 100%;
width: 100%;
background-image: linear-gradient(white 0%, white var(--btnTop), transparent var(--btnTop), transparent var(--btnBottom), white var(--btnBottom), white 100%), linear-gradient(to right, white 0, white 100%), url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg');
background-size: var(--borderW) 100%, 100% var(--borderW), cover;
background-position: calc(var(--btnMid) - (var(--borderW) / 2)) 0, 0 var(--logoMid), center top;
background-repeat: no-repeat no-repeat;
margin: 0;
padding: 0;
position: relative;
}
.logo-img {
box-sizing: content-box;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.btn {
box-sizing: content-box;
margin: 0;
padding: 0;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
box-sizing: content-box;
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
Note: run the snippet in full screen as there won't be enough room to show the gap between the logo and btn on the small snippet viewport.
Here is my solution, Its not perfect, but it will give you a good starting points.
I have changes your HTML structure, by removing the divs that create the lines, Instead, I have used pseudo selectors to draw the lines.
Note that, you will have to tweak some of these numbers to properly fit your content.
Please run the example in full screen mode
.fullscreen {
height: 100vh;
width: 100%;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center/cover;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 100px;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.logo-img:before {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
left: 130px;
display: block;
}
.logo-img:after {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
right: 130px;
display: block;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
padding: 20px;
box-sizing: border-box;
}
.btn .inner {
width: 100%;
height: 100%;
background: white;
}
.btn:after {
content: "";
display: block;
width: 3px;
height: calc(50vh - 48px);
background: #ffffff;
position: absolute;
top: 100%;
left: 50%;
}
.btn:before {
content: "";
display: block;
width: 3px;
top: calc(-50vh + 220px);
background: #ffffff;
position: absolute;
bottom: 100%;
left: 50%;
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn">
<div class="inner"></div>
</div>
</div>
I want to make an image inside div to scroll down on hover. And that part is working.
Also, I need to make that it scroll longer if the image is longer and because of that I was trying to use calc inside of transition, but it is not working.
Here is my code:
.preview {
position: relative;
width: 75%;
height: 90vh;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.previewimg {
width: 100%;
height: 100%;
top: 0;
background-image: url(https://www.n2odesigns.com/wp-
content/uploads/Projema-Website-Preview-2016.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: 0;
transition: all calc(0.02s * height) ease-in-out;
}
.previewimg:hover {
background-position-y: 100%;
height: 100%;
transition: all calc(0.02s * height) ease-in-out;
}
<div class="preview">
<div class="previewimg"></div>
</div>
If there is some other better way to do this I can use it too.
Ok to do this you need it to be an image only not a background image, to do this transition duration based on height functionality, please use the below code.
$('.previewimg').css("transition", "transform " + 0.02 * $('.previewimg').height() + "s ease");
.preview {
position: relative;
width: 75%;
height: 300px;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.preview .previewimg {
width: 100%;
height: auto;
transform: translateY(0px);
}
.preview:hover .previewimg {
transform: translateY(calc(-100% + 300px));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<img class="previewimg" src="https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg"/>
</div>
If you are accepting JS as a solution then here is a code you can add without changing your HTML/CSS structure :
function getHeight(url) {
console.log(url);
var img = new Image();
img.src = url;
return 0.002*parseInt(img.height);
}
var e =$(".previewimg");
var tr = "all "+getHeight(e.css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'))+"s ease-in-out";
console.log(tr);
e.css('transition',tr);
.preview {
position: relative;
width: 75%;
height: 90vh;
overflow: hidden;
border: 1px solid red;
background-color: transparent;
}
.previewimg {
width: 100%;
height: 100%;
top: 0;
background-image: url(https://www.n2odesigns.com/wp-content/uploads/Projema-Website-Preview-2016.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: 0;
}
.previewimg:hover {
background-position-y: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<div class="previewimg"></div>
</div>
You don't actually use javascript for it.
it's codepen : codepen.io or it's the css code for you code:
.preview {
width:300px;
height:300px;
overflow: hidden;
}
.previewimg{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://source.unsplash.com/500x1500/);
transition: background-position 2s ease-out;
}
.preview:hover .previewimg{
background-position: 0 100%;
}
you can add other body elements with the styles classes name. And it make a boxes that when we hover the logo is changed. The logo is changes on hover.
*{
box-sizing: border-box;
}
.logoses{
text-align: center;
list-style: none;
}
.logoses .logo{
width: 178px;
height: 75px;
background:
url('G:/touqeer/amp-landing-pages/assets/images/clients_logo.png') center top no-repeat;
margin: 0 2px 8px;
border: 1px solid #e0e0e0;
display: inline-block;
vertical-align: middle;
transition: all .4s ease-in;
}
#amara{
background-position: 5px -125px;
}
#amara:hover{
background-position: 5px 0px;
}
#ge{
background-position: -1486px -125px;
}
#ge:hover{
background-position: -1486px -2px;
}
#nuance{
background-position: -489px -124px;
}
#nuance:hover{
background-position: -489px -1px;
}
#gilson{
background-position: -329px -123px;
}
#gilson:hover{
background-position: -329px 0px;
}
#pcs_wireless{
background-position: -824px -125px;
}
#pcs_wireless:hover{
background-position: -824px -2px;
}
#herbalife{
background-position: -161px -123px;
}
#herbalife:hover{
background-position:-161px 0px;
}
#pcf{
background-position: -659px -125px;
}
#pcf:hover{
background-position: -659px -2px;
}
#seimens{
background-position: -991px -125px;
}
#seimens:hover{
background-position:-991px -2px;
}
#melesta_games{
background-position: -1156px -124px;
}
#melesta_games:hover{
background-position: -1156px 1px;
}
#samsung{
background-position: -1324px -123px;
}
#samsung:hover{
background-position: -1324px 0px;
}
.center_pd{
padding: 75px 0px;
}
.text_bottom{
margin: 0px 0px 60px 0px;
}
.center_text{
text-align: center;
}
.header{
margin: 0px 0px 20px 0px;
}
h2{
font-size: 30px ;
font-weight: 400;
color: #393939;
}
.prg{
font-size: 16px;
color: #333;
font-family: Open Sans;
}
I want to create same bottom triangle effect with background but i am not able to get this effect bottom triangle with background image.
enter image description here
i have added the code here but not getting the same effect.bottom arrow im not able to extend as in image.
.logo,.nav,.social-icons{ float:left;}
body{ color:#000; background:#ccc;}
.container{border:1px solid red;}
.clear{ clear:both;}
html,body{margin:0;padding:0;}
/*****************************
BANNER
*****************************/
.section {
height: 680px;
width: 100%;
background: url("http://i.imgur.com/YtluDV9l.jpg") no-repeat left top;
background-size:cover;
}
.bottom-container {
margin-top: -137px;
height: 100px;
width: 100%;
}
.text {
position: relative;
box-sizing: border-box;
height: 300px;
padding-top: 36px;
text-align: center;
line-height: 85px;
background: url("http:////i.imgur.com/uCYtKen.jpg") no-repeat left top;
background-clip: content-box;
overflow: hidden;
margin: 25px 0 0 0;
}
.text:before {
left: 0px;
width: 26%;
transform-origin: left bottom;
transform: skew(-134deg);
}
.text:after, .text:before {
position: absolute;
content: '';
top: 0px;
height: 35px;
background: #fff;
}
.text:after {
right: 2px;
width: 74%;
transform-origin: right bottom;
transform: skew(-226deg);
}
<body>
<!--WRAPPER:STARTS-->
<div id="wrapper">
<!--HEADER:STARTS-->
<!--BANNER:STARTS-->
<section class="section">
</section>
<div class="bottom-container">
<div class="text">Some text</div>
<div class="middle-image"></div>
<div class="right-image"></div>
</div></div>
</body>
html,body{background:url(http://i.imgur.com/ixr4wNC.jpg); height:100%;padding:0;margin:0;overflow:hidden;}
.line {
margin-top: 50px;
height: 5px;
width: 20%;
background: #fff;
position: relative;
box-sizing: border-box;
}
.line:after,
.line:before {
content: "";
position: absolute;
}
.line:after {
left: calc(100% + 2px);
height: 25px;
width: 25px;
top: -12px;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
transform: rotate(225deg);
}
.line:before {
height: 100%;
top: 0;
left: calc(100% + 34px);
width: 400px;
background: inherit;
}
<div class="line"></div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
I am trying to archieve a zoom in my background's in divs. I don't want the div to be bigger, but I want the image to zoom on hover, without growing the div. I have tried everything, but I can't seem to get it to work.
CSS:
/* Theme */
html {
margin-top: 0px !important;
}
/* DO NOT EDIT OR MONKEYS WILL BITE YOU */
.frame_holder {
position: absolute;
top: 8px;
bottom: 50px;
/* left: 50px; */
right: 150px;
background: #ffffff;
}
.my_frame {
width: 149%;
height: 108%;
/* border: 1px solid #e0e0e0; */
}
body {
background-color: #f0ede9;
margin-top: 0px;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.clearfix {
clear: both;
}
p {
font-family: Roboto;
padding: 1px;
}
#body.layout-1 {
background: #f0ede9 url(../images/border.gif) 640px top repeat-y scroll;
background-color: #f0ede9;
background-image: url(../images/border.gif), url(../images/border-2.gif);
background-repeat: repeat-y, repeat-y;
background-position: 640px top, 0px top;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: #bababa;
font-family: Roboto;
}
#wrapper {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 80px;
background: #2a2727;
margin-top: 20px;
color: #fff;
}
.top-logo-container {
display: block;
height: 100px;
width: 100px;
text-indent: -9999px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100px;
}
#main {
margin-left: 2px;
}
.presenter-ribbon {
display: block;
position: absolute;
left: -5px;
top: 20px;
color: #fff;
background-color: #de1f26;
font-size: 12px;
line-height: 30px;
padding: 0 20px 0 30px;
font-family: 'Roboto Condensed',sans-serif;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
text-transform: uppercase;
z-index: 20;
text-decoration: none;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.25);
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.box-link {
display: block;
position: absolute;
overflow: hidden;
box-sizing: border-box;
padding: 60px 20px 10px;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
background-position: center center;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-ms-transition: all .1s linear;
-o-transition: all .1s linear;
}
.box-link .box-overlay {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.15);
z-index: 10;
box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2) inset;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
}
.box-link .box-overlay:hover {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.15);
z-index: 10;
box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2) inset;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
}
.box-link .box-visual {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center center;
z-index: 5;
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.box-link .box-visual:hover {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center center;
z-index: 5;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0.7;
}
.box-link h4 {
display: block;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
z-index: 20;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
margin-bottom: 0;
}
.box-link h4 {
font-size: 22px;
line-height: 34px;
}
.presenter-one {
display: block;
height: 49.65%;
width: 50%;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
}
.presenter-two {
float: left;
position: relative;
display: block;
height: 25%;
width: 25%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
position: relative;
display: block;
height: 25%;
width: 25%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
position: relative;
display: block;
height: 25.4%;
width: 25%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
position: relative;
display: block;
height: 25.4%;
width: 25%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
}
#media screen and (min-width: 737px) and (max-width: 1200px) {
#wrapper {
width: 100%
}
}
#media screen and (min-width: 737px) and (max-width: 1200px) {
#wrapper {
width: 100%
}
}
#media screen and (max-width: 736px) and (min-width: 415px) {
#wrapper {
width: 100%
}
#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}
.top-logo-container {
display: block;
height: 120px;
width: 120px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 120px;
}
#main {
margin-left: 2px;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.presenter-one {
display: block;
height: 50%;
width: 100%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
}
#media screen and (max-width: 414px) and (min-width: 1px) {
#wrapper {
width: 100%
}
#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}
.top-logo-container {
display: block;
height: 120px;
width: 120px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 120px;
}
#main {
margin-left: 2px;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.presenter-one {
display: block;
height: 50%;
width: 100%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
}
https://jsfiddle.net/9b7fvfk6/
HTML:
<meta name="viewport" content="width=device-width" />
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="presenter">
<div class="presenter-one"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
<div class="presenter-two"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
<div class="presenter-three"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
<div class="presenter-four"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
<div class="presenter-five"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
</div>
</div>
Is there anyone who can help me? I thought I would have to make a box-visual:hover, but that's not doing anything either. :-(
Change the hover to the .box-link should makes it working. Example:
.box-link:hover .box-visual {
transform: scale(1.1);
}
See Updated Fiddle
If you don't want the image to cross the borders of the div, set the div CSS property to overflow: hidden;
.container {
border: 2px solid black;
height: 300px;
width: 300px;
overflow: hidden;
}
img:hover {
transform: scale(1.5);
}
<div class="container">
<img src="http://goo.gl/1ex50e"/>
</div>
Hoping someone can point me right...
I have been trying all day to figure out how to hide a flash behind some html elements, and then reveal the flash object when hovering using css transitions.
I came up with two solutions, each is only %50 of what I really want.
The first example transitions when you hover, and you can click the links, but I want it to transition like example two.
The second example transitions the way I want, but anything behind cannot be clicked.
Where did I mess up? Are my z-index(s) not getting parsed in example two?
Examples: http://jsfiddle.net/zyD4D/
HTML:
<object> Links Work
<br />But Curtains Are Wrong
</object>
</div>
<hr>
<div id="theatre2"> <em id="curtain-left2"></em>
<em id="curtain-right2"></em>
<object> Links Don't Work
<br />But Curtains Are Right
</object>
</div>
CSS:
div#theatre {
border: inset black 0px;
height: 425px;
width: 600px;
margin: 0 auto;
text-align: center;
line-height: 120px;
font-size: 30px;
position: relative;
overflow: hidden;
background: black;
}
div#theatre #curtain-left {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
background: url(http://s27.postimg.org/dznawniab/curtain_left.jpg) 0px 0px no-repeat;
transition: all 4s ease;
background-size: 100%;
}
div#theatre #curtain-right {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
background: url(http://s27.postimg.org/9ozg9kyfn/curtain_right.jpg) 0px 0px no-repeat;
transition: all 4s ease;
background-size: 100%;
}
#curtain-left {
left: 0;
}
#curtain-right {
right: 0;
}
div#theatre:hover #curtain-right {
width: 0;
background-size: 1px;
transition: all 4s ease;
}
div#theatre:hover #curtain-left {
width: 0;
background-size: 1px;
transition: all 4s ease;
}
div#theatre2 {
border: inset black 0px;
height: 425px;
width: 600px;
margin: 0 auto;
text-align: center;
line-height: 120px;
font-size: 30px;
position: relative;
overflow: hidden;
background: black;
}
div#theatre2 #curtain-left2 {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background: url(http://s27.postimg.org/dznawniab/curtain_left.jpg) 0px 0px no-repeat;
background-size: 100%;
}
div#theatre2 #curtain-right2 {
content:'';
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
width: 50%;
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background: url(http://s27.postimg.org/9ozg9kyfn/curtain_right.jpg) 0px 0px no-repeat;
background-size: 100%;
}
#curtain-left2 {
left: 0;
}
#curtain-right2 {
right: 0;
}
div#theatre2:hover #curtain-right2 {
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background-position: +301px 0px, left top;
}
div#theatre2:hover #curtain-left2 {
transition-property:background-position;
transition-duration:2s;
transition-timing-function:ease-out;
background-position: -301px 0px;
}
.object {
margin: 0.0em auto;
position: relative;
z-index: 1;
}
Change your css to only transition the left and right margins of the left and right curtains respectively.
div#theatre #curtain-left {
...
transition: margin-left 4s ease;
margin-left:0;
left:0;
...
}
div#theatre #curtain-right {
...
transition: margin-right 4s ease;
margin-right:0;
right:0;
...
}
div#theatre:hover #curtain-right {
margin-right:-300px;
}
div#theatre:hover #curtain-left {
margin-left:-300px;
}
and remove the background-size change on hover.
I fixed up your fiddle. http://jsfiddle.net/zyD4D/2/