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.
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 have a banner caption with vertical text which I've lined up using position: absolute;. However this text is user defined, so as the text changes, the alignment changes. How do I go about positioning this so it stays in the bottom left corner no matter the text?
.banner__wrap {
background-color: grey;
margin: 0 auto;
max-width: 1180px;
padding: 0 20px;
height: 100vh;
position: relative;
}
.banner__caption {
bottom: 150px;
background-color: red;
left: -50px;
max-width: 270px;
position: absolute;
transform: rotate(-90deg);
}
h2 {
margin: 0;
}
h4 {
margin: 10px 0 0;
}
<div class="banner__wrap">
<a class="banner__caption" href="www.google.com">
<h2>this is my heading</h2>
<h4>this is my cool subheading with a bunch of text</h4>
</a>
</div>
Adjust transform-origin and add a translation like this:
body {
margin:0;
}
.banner__wrap {
background-color: grey;
margin: 0 auto;
max-width: 1180px;
padding: 0 20px;
height: 100vh;
position: relative;
}
.banner__caption {
background-color: red;
max-width: 270px;
position: absolute;
bottom:0;
transform: rotate(-90deg) translateY(100%);
transform-origin: bottom left;
}
h2 {
margin: 0;
}
h4 {
margin: 10px 0 0;
}
<div class="banner__wrap">
<a class="banner__caption" href="www.google.com">
<h2>this heading</h2>
<h4>this is subheading</h4>
</a>
</div>
The problem is the left: -50px; in banner__caption class. I didn't understand why did you use minus. Try to remove it
.banner__caption {
bottom: 150px;
background-color: red;
max-width: 270px;
position: absolute;
transform: rotate(-90deg);
}
I would use position:fixed. Something like:
.wrapper {
position: fixed;
left: 0px;
top: 0px;
background: red;
}
.content {
position: absolute;
bottom: 0px;
transform: rotate(90deg);
transform-origin: 0 100%;
background: red;
white-space: nowrap;
}
.read-up {
-webkit-transform: rotate(180deg);
}
<div class="wrapper">
<div class="content">
<div class="read-up">
Content goes hereeeeeeee
</div>
</div>
</div>
The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}
I'm trying to create a "button" with 2 sections (each is 50% of the height of the div) separated by an horizontal bar. Each of the sections has centered text. The size of the button is going to be manipulated using javascript, and I'm trying to avoid also using javascript to position the elements inside the "button".
What I have so far is http://jsfiddle.net/u5u7d31p/2/, but i'm having a problem centering the horizontal bar. If I change the position of the separator to relative, the bar is centered, but then it changes the position of the bottom part of the text. I can also change the margin to a static value (margin: 0 63px;) to center it, but I would like to avoid it if there is an easier solution that doesn't require javascript.
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
Any ideas? Thanks.
All codes are ok. Just put this css below to .img_overlay .separator class.
Full code is below:
.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}
view my demo on jsfiddle
.img{
float: left;
background-repeat:no-repeat;
background-size:100% 100%;
border-radius: 4px;
width: 200px;
height: 51px;
background: red;
overflow: hidden;
}
.img_overlay{
width: 100%;
height: 100%;
background: #222;
color: #ddd;
position: relative;
opacity: 0.8;
}
.img_overlay>div{
display: block;
width: 100%;
height: 50%;
text-align: center;
position: relative;
}
.img_overlay .middle{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.img_overlay .separator{
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
<div class="img">
<div class="img_overlay">
<div class="img_show_details">
<div class="middle">details</div>
</div>
<div class="img_open">
<div class="separator"></div>
<div class="middle">open</div>
</div>
</div>
</div>
All I did was taking off :
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
}
This following fix works okay in firefox and chrome but mess in IE.
I fixed height in div, top in middle and top in separator
.img_overlay>div {
display: block;
width: 100%;
height: 40%;
text-align: center;
position: relative;
}
.img_overlay .middle {
position: relative;
top: 60%;
transform: translateY(-50%);
}
.img_overlay .separator {
position: relative;
top: 5px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
here's the demo in jsfiddle.
I have a div (fixed) which acts like a pop up:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?
Vote to Close almost has it, but with the 1px width, the element doesn't get centered.
Do this instead:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.
A couple of solutions.
First, you can make the child of the container centered using translateX() transform: http://jsfiddle.net/Yjz5R/. The same effect can be accomplished using negative margins, but the width for the container's child has to be set: http://jsfiddle.net/9Qmza/.
CSS:
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Or second, you can make the container "immune" to click events:
Markup:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
Styles: http://jsfiddle.net/CVfHt/.
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}
Lastly, a question/comment. If you do not want the container to be visible, then why use it at all? Just keep the markup of the child and get rid of the container: http://jsfiddle.net/yvc4E/.
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}