hi im want to make that the hover effect in css triggers only when the mouse its over the image and not starts when it over a div container of this image...
how can i do??
<div class="contenedor">
<img class="encendido" src="foco_encendido.svg">
<img class="apagado" src="foco_apagado.svg">
</div>
.apagado
{
background: #333333;
width: 350px;
position: absolute;
margin: 0 0 0 5px;
bottom: 0px;
}
.contenedor
{
width: 360px;
height: 85%;
position: absolute;
left: 200px;
bottom: 0px;
}
.contenedor:hover img.apagado
{
visibility: hidden;
}
.encendido
{
width: 350px;
position: absolute;
margin: 0 0 0 5px;
bottom: 0px;
}
change
.contenedor:hover img.apagado
{
visibility: hidden;
}
to
.apagado:hover
{
visibility: hidden;
}
Related
I have an input that when selecting an image it fills all this box ...
In order to completely fill this box I used 100% height and width ... in fact the image occupies the entire box, but not all of its details are visible.
Is there any way to get the image to occupy 100% but in which all your content is visible?
My problem:
Original Image
Picture inside the box (What I have)
As you can see, the image occupies the whole box (it's correct) but the problem is that the full image doesn't appear :(
Any solution?
Thanks!
My code and test
HTML
<div class="drop">
<div class="cont" *ngIf="urls.length === 0">
<div class="browse" >
Upload files
</div>
</div>
<div *ngIf="urls.length > 0">
<img [src]="urls[0]">
</div>
<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>
css
.drop {
margin-left: 32px;
width: 928px;
height: 696px;
border-radius: 15px;
overflow: hidden;
text-align: center;
background: white;
/* margin: auto; */
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
/*&:hover
cursor: pointer
background: #f5f5f5*/;
}
.drop .cont {
width: 500px;
height: 170px;
color: #8E99A5;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.drop .cont i {
font-size: 400%;
color: #8E99A5;
position: relative;
}
.drop .cont .browse {
margin: 10px 25%;
padding: 8px 16px;
border-radius: 16px;
background: #ECF2F9;
text-align: center;
font: Bold 13px/20px Noto Sans;
letter-spacing: 0;
color: #4D4F5C;
}
.drop input {
width: 928px;
height: 650px;
cursor: pointer;
background: red;
opacity: 0;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#list {
width: 100%;
text-align: left;
position: absolute;
left: 0;
top: 0;
}
#list .thumb {
height: 100%;
margin: 10px 5px 0 0;
}
img {
width: 100% !important;
height: 100% !important;
}
It's because your giving a fixed height to the parent container, what you have to add is this:
.drop{
box-sizing: border-box;
}
.drop>img{
width: 100%;
height: auto;
}
It's because of this line:
.drop {
overflow: hidden;
}
If you change it to overflow: visible/scroll it will work.
If you don't want the image to scroll you could edit the css like this:
img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}
I updated. Try this.
img {
height: 100% !important;
}
.abc {
width: 100% !important;
height: 100% !important;
}
<div class="abc" *ngIf="urls.length > 0">
<img [src]="urls[0]">
</div>
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}
I'm trying to put two different things on top of an image inside a media object from bootstrap. One of them is a badge/label which should be placed on the bottom right corner of the image, but currently I can only get it to appear on the top left. The other is a play icon, which should appear smack bang in the middle of the image.
Here is the code, and also a jsfiddle:
HTML:
<a class="news-link" href="#">
<div class="media">
<div class="image-container">
<img class="pull-left img-responsive" src="http://i59.tinypic.com/16m9f1f.png">
<div class="video-badge">
<h6>Badge</h6>
</div>
<div class="play-icon">
<img class="img-responsive" src="http://i57.tinypic.com/20jptok.png">
</div>
</div>
<div class="media-body">
<h4 class="media-heading">Title</h4>
Content
</div>
</div>
</a>
CSS (as well as some others and Bootstrap which I put on the jsfiddle):
.image-container {
position: relative;
}
.image-container img {
padding-right: 10px;
}
.video-badge {
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding: 5px 25px 5px 10px;
overflow: hidden;
z-index: 1;
}
.video-badge h6 {
text-decoration: none;
color: #fafafa;
margin: 0;
}
.video-badge:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #5e4c33;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
z-index: -1;
}
.play-icon {
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding: 5px 25px 5px 10px;
overflow: hidden;
z-index: 1;
max-width: 85px;
}
JSFiddle:
http://jsfiddle.net/pgo7h903/
Change your css like this
CSS Code:
.image-container {
display: inline-block;
float: left;
}
.play-icon {
display: inline-block;
left: 0;
margin: 0 auto;
max-width: 85px;
overflow: hidden;
padding: 75px 25px 5px 10px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.video-badge {
bottom: 0;
display: inline-block;
left: 0;
overflow: hidden;
padding: 5px 25px 5px 10px;
position: absolute;
z-index: 1;
}
.media img.pull-left.img-responsive {
max-width: 100%;
}
see demo http://jsfiddle.net/JentiDabhi/65ajj56j/4/
#JentiDabhi 's answer works but isn't an efficient way to code, as it uses up a lot of code. Try this:
.play-icon {
width: auto;
margin: 65px;
}
Add that into your CSS and it should center it. If you feel it's not centered, change the margin to margin-right and margin-top and change it there.
EDIT
For the badge, add this:
.video-badge {
margin-left: 201px;
margin-top: 143px;
}
Now it should be at the bottom right of the image.
I am trying to create a header for my website, with a logo contained. I wish for the logo to have a 5 pixel margin from the top of the header div that it is contained inside, however when I add "margin-top: 5px" to the div containing the logo, the header div is push 5 pixels down instead.
<div id="background">
<div id="HeaderGrey">
<div id="HeaderLogo">
<img src="CHBadgeLogo.png" />
</div>
</div>
<div id="HeaderShaderTop"></div>
<div id="HeaderShaderBottom"></div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
#background {
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 600px;
overflow: hidden;
z-index:0;
background-color: #303030;
}
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
}
I'm assuming this would have a pretty easy fix, I'm just new to html/css, sorry.
The positioning works only when you put the parent (containing) element as non-static, like relative. Then you can position the element with relative or absolute (taking it out of the flow).
Like so:
body {
margin: 0;
padding: 0;
position:relative;
}
#background {
left: 0px;
top: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 600px;
overflow: hidden;
z-index:0;
background-color: #303030;
position:relative;
}
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
position: relative;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
position: absolute;
}
Very nice Question,
I see that you know how to use padding which is good. If just simply add a padding-top: 5px; to the image div it should just move the image down 5px from the top of the navbar!
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/