I am trying to show a transparent cover when I hover over a <picture /> or a <video />, and hide the cover again when the mouse leaves the image or the video.
Here is my code:
$(document).ready(function() {
$('.cspn-show-on-hover').hover(
function() {
$(this).find('.cspn-cover').css('display', 'table-cell');
},
function() {
$(this).find('.cspn-cover').css('display', 'none');
},
);
});
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<video class="cmedia-box" controls>
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
As you may notice, when you hover on the image, a transparent purple cover is shown. But when I used a <video /> instead of <picture />, the cover no longer appears !
Could anyone help me identify the reason ?
I think you are looking for something like this:
<html>
<head>
<style>
div{display:inline-block;}
img,video{height:200px;}
.cover:hover{background:#fff;opacity:0.15;}
</style>
</head>
<body>
<div class="cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
<div class="cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</body>
</html>
All you need is a wrapper:
.media-cover {
display: inline-block;
position: relative;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #6b478fb3;
opacity: 0;
}
.media-cover:hover:after {
opacity: 1;
}
<div class="media-cover">
your media object here...
</div>
Here's an example with the media objects centered in a full screen parent:
.media-cover {
position: relative;
display: inline-block;
}
.center-me {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 15%;
border-bottom: 1px solid #eee;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none; /*delete this line to disable interaction with video/picture */
background-color: #6b478fb3;
opacity: 0;
transition: opacity .2s linear; /*delete this line to disable fade effect */
}
.media-cover video, .media-cover picture, .media-cover img {
display: block;
max-width: 100%;
}
.media-cover:hover:after {
opacity: 1;
}
picture img {
max-width: 100%;
display: block;
}
body {margin: 0;}
<div class="center-me">
<div class="media-cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
</div>
<div class="center-me">
<div class="media-cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</div>
Video elements should be treated as images, where they can't have unrelated children elements. Also, you should be able to make the hover event by just using pure css like so:
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
I made it work how you might have intended here:
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<div class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<video controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
Related
I want to have an image inside a div (the violet one, see images below), whose dimensions are expressed in %, and that the image never go out from the div but resize when needed, keeping the aspect ratio.
Currently, my code is the following but the image comes out from the div as you can see in the pictures below.
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
}
#conteneurImage img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="home.png">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
The result:
What I expect:
You can use "display: flex; justify-content: center; " in #conteneurImage. And then Use "width:auto;height:100%;" in #conteneurImage img.You can learn more about flex in https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
display:flex;
justify-content: center;
}
#conteneurImage img {
width: auto;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="https://image.flaticon.com/icons/svg/2/2144.svg">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
i don't know wher is the problem here in my video or in the css code?
<center>
<div class="video-js-responsive-container vjs-hd">
<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls
preload="auto" data-setup="{}">
<source src="<?php echo $linkdown?>" type='video/mp4' width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
<source poster="<?php echo $posterimg; ?>">
</video>
</div>
</center>
i can't remove this css beaucose i need this css code!maybe it should be modified?
<style>
.video-js-responsive-container.vjs-hd {
padding-top: 56.25%;
}
.video-js-responsive-container.vjs-sd {
padding-top: 75%;
}
.video-js-responsive-container {
width: 100%;
position: relative;
}
.video-js-responsive-container .video-js {
height: 75%;
width: 75%;
position: absolute;
top: 0%;
left: 0%;
}
body{
background-color:#f2f2f2;
}
</style>
Try doing this:
.video-js-responsive-container .video-js {
height: 75%;
width: 50%;
position: relative;
top: 0%;
left: 0%;
}
Try specifying top and left of the inner element to 25% / 2 = 12.5%:
.video-js-responsive-container .video-js {
height: 75%;
width: 75%;
position: absolute;
top: 12.5%;
left: 12.5%;
}
**this was the correct code CSS, I found it after three hours **
<style>
.video-js-responsive-container.vjs-hd {
padding-top: 35.50%;
}
.video-js-responsive-container.vjs-sd {
padding-top: 55%;
}
.video-js-responsive-container {
width: 75%;
position: relative;
}
.video-js-responsive-container .video-js {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
body{
background-color:#f2f2f2;
}
</style>
For some reason this is giving me heck and can't find a solid answer.
I have a video playing in the background that goes to full-width and is responsive to the screen size. I have a title/text over the video. But I cannot for the life of me figure out how to vertically center this text to the video in a responsive way! Thanks for any help!
Codepen:
http://codepen.io/149203/pen/VagPxe
html:
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div> <!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div> <!-- header-container -->
</body>
css:
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
text-align: center;
color: white;
}
pulling in this css:
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css
Display wrapper to display: table, change child element to display: table-cell, vertiacl-align: middle.
http://codepen.io/anon/pen/ZWwLPP
I found and forked this CodePen. This is the best solution I found. (Uses Bootstrap.)
http://codepen.io/149203/pen/JXxbEL
HTML
<div class="row">
<div class="col-xs-12 vert-center-container">
<video autoplay loop style="width:100%" class="img-responsive">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" />
</video>
<div class="vert-center-text">
<h1>Caption Text</h1>
</div>
</div>
</div>
CSS
.vert-center-text {
position: absolute;
top: 40%;
left: 0;
text-align: center;
width: 100%;
}
.vert-center-text h1 {
color: white;
}
.vert-center-container {
position:relative;
}
simulate the the header container as table and h3,h6 as table-cell with vertical-align:middle
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
display:table;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
display:table-cell;
vertical-align:middle;
text-align: center;
color: white;
}
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div>
<!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div>
<!-- header-container -->
</body>
I am developing a Simon Says game, and have all the working JavaScript, etc.
The main problem I am having is with the CSS; everything works when you click it,
Here is a mock image of what I want it to look like:
update still having alingment problems have updated my CSS
CSS:
body {
background-color: #333;
color: #fff;
}
ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
padding: 3px;
}
.wrapper {
position: relative;
width: 640px;
margin: 0 auto;
}
.back {
width:700px;
height:700px;
background-color:black;
}
.pad {
width: 200px;
height: 200px;
z-index: 1;
margin: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}
.shape1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -300px;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
.shape2 {
position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.shape3 {
position: absolute;
left: 0;
right: 50%;
margin-right: -50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
}
.shape4 {
position: absolute;
left: 0;
bottom: 50%;
margin-bottom: -50px;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
.level, .score {
width: 50%;
float: left;
text-align: center;
}
.sButton {
width: 30%;
margin: 0 auto;
}
.start {
width: 100%;
height: 30px;
text-align: center;
}
HTML:
<body>
<div class="wrapper">
<div class="back">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="break"></div>
</div>
<div class="level">
<h2>Level: 1</h2>
</div>
<div class="score">
<h2>Score: 0</h2>
</div>
<ul class="difficulty">
<li>
<input type="radio" class="difOpt" name="difficulty" value="2">Easy
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.5">Hard
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.25">Insane
</li>
</ul>
<div class="sButton">
<button class="start">start</button>
</div>
</div>
</body>
You are going to want to give your shapes an absolute position and use the "top", "left", "right" and "bottom" css properties like so:
.shape1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
Note that margin-top is used to slightly offset the "top" property. Border-radius will turn these into circles.
I have this code:
HTML
<div id="wrapper">
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image1.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image2.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
<div class="box">
<img src="http://tukaki.pawlusmall.com/images/image3.png"/>
<span class="caption">
<p>caption</p>
</span>
</div>
</div>
CSS
.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}
.box img {
height: auto;
width: 100%;
position: absolute;
left: 0;
}
.box span {
position: absolute;
width: 100%;
height: auto;
color: #FFF;
left: 0;
background-color: #FF0000;
}
You can find it here:
http://jsfiddle.net/v2Vk3/3/
Just want the caption to be the same height and width as the image, overlaping it and without changing the automatic resizing for images.
Is there any way to get this working with CSS?
Thx
I guess you have asked for this http://jsfiddle.net/6hgCj/
.box {
position: relative;
width: 30%;
height: auto;
display: inline-block;
}
.box img {
height: auto;
width: 100%;
}
.box span {
position: absolute;
width: 100%;
height: 100%;
color: #FFF;
left: 0;
top:0;
background-color: #FF0000;
}