I am putting together a slideshow for a CMS, this slideshow has some tolerance for a range of image dimensions. Unfortunately I am unable to wrap all the images in a border.
See the image to better understand the problem.
Please check this, hope this will work for you.
.slider_container {
position: relative;
}
.slider_container img {
position: relative;
width: 100%;
}
.slider_container .border_box {
position: absolute;
border: 3px solid #fff;
left: 5px;
right: 5px;
top: 5px;
bottom: 10px;
}
<div class="slider_container">
<img src="http://www.electricprism.com/aeron/slideshow/images/1.jpg" alt="">
<div class="border_box"></div>
</div>
Related
I'm trying to create a bar graph with HTML/CSS and I'm having trouble with CSS's scale property. Here's my code so far:
.main {
position: absolute;
top: 350px;
width: 80%;
height: 65%;
background-color: #1d1d1d;
border: 20px #3f3f3f solid;
left: 50%;
transform: translate(-50%, 0);
}
.bar {
position: relative;
display: inline-block;
width: 30px;
margin-left: 1.1%;
background-color: #38ff90;
border-top: 5px #1d6d41 solid;
border-left: 5px #1d6d41 solid;
border-right: 5px #1d6d41 solid;
transform-origin: bottom;
transform: scaleY(10);
}
.bar-height {
position: relative;
display: inline-block;
opacity: 0;
}
<div class="main">
<div style="height: 100%;" class="bar-height"></div>
<div style="height: <?php echo $height ?>px;" class="bar"> </div>
</div>
When I use scale(), this ends up scaling the border on each bar. How can I scale the bar element without scaling the border?
You've some examples here:
note that it's usually done with SCSS or JS /any JS framework.
https://codepen.io/Victa/pen/xDqbf
https://codepen.io/dxdc100xp/pen/WwMQwE
https://codepen.io/baletsa/pen/oHcfr
the code provided is only to see the logic and the procedure for reach this. SCSS is a good option and not too difficult to use it's like CSS on steroids.
I'm trying to create exactly like what is shown in the picture below. I have tried other methods using outline and offset method too but I could't figure out how to go on about doing this.
Here's the JSFiddle:
img {
border: 4px solid green;
}
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
How do I do to get this offset border over the image?
Wrap the image with an inline block, and set an absolutely positioned pseudo-element as the border:
body {
padding: 50px 0 0 80px;
}
.imageContainer {
display: inline-block;
position: relative;
}
.imageContainer::before {
position: absolute;
top: -5%;
left: -15%;
width: 100%;
height: 100%;
border: 4px solid #77B244;
content: '';
}
<div class="imageContainer">
<img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0">
</div>
A simpler way would be to use a combination of border, outline and a negative outline-offset. Here is an example :
img{
outline:4px solid #77B244;
outline-offset:-100px;
border:50px solid transparent;
border-width:150px 50px 50px 150px;
margin:-75px 0 0 -75px;
}
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
This prevents the use of a parent element and a pseudo element.
Another possibility would be to wrap image inside a div element having a border and move image inside container towards left and bottom.
As from Documentation:
A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.
We will need to wrap img inside an element like div i.e:
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" >
</div>
We will apply border to the container and move image from its normal position with following CSS:
.image-holder img {
position: relative;
z-index: -1;
left: 40px;
top: 40px;
}
.image-holder {
border: 7px solid #76af46;
display: inline-block;
vertical-align: top;
}
.image-holder img {
position: relative;
z-index: -1;
left: 40px;
top: 40px;
}
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>
Alternatively, we can use CSS3 translate() as well.
.image-holder img {
transform: translate(40px, 40px);
position: relative;
z-index: -1;
}
.image-holder {
border: 7px solid #76af46;
display: inline-block;
vertical-align: top;
}
.image-holder img {
transform: translate(40px, 40px);
position: relative;
z-index: -1;
}
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>
I have problem with write code which will display presented situation as in the examples below. It is about triangles, they should contact one of the vertices (
not necessarily on half the page, it would be 60/40). While the triangles are not a big problem, that responsively is a challenge for me. On the background I would like put img (maybe like background-image, maybe like diferrent layer + mask with overlay: hidden).
Model 1:
Model 2:
What I was tray so far:
<style>
.section1::after {
width: 0;
height: 0;
right: -200px;
position: absolute;
top: 0;
z-index: -1;
border-style: solid;
border-width: 0 0 795px 750px;
border-color: transparent transparent #fddfc0 transparent;
}
.section1 .img-right {
position: absolute; right: 0; top: 0;
}
.section2 {
background-color: #fddfc0;
height: 670px;
background-image: url(../img2.png);
}
.section2 .trapezoid {
border-bottom: 670px solid white;
border-left: 714px solid transparent;
width: 100%;
position: absolute;
right: 0;
}
</style>
<div class="section1">
<div class="text">
text
</div>
<div class="img-right"><img src="img.png" alt="" /></div>
</div>
<div class="section2">
<div class="trapezoid">
text
</div>
</div>
As you see i tried two methods. Section1 with ::after pseudoelement which display triangle on the right and section2 where I put trapezoid on top which masks section2 div. As I said, my problem is how to make it responsive.
I am trying to achieve two hover effects on an image.
First, when the user hovers over an image a plus icon on the top right corner of the image appears.
Second, when the user hovers over the plus the icon changes to: “Add to collection”.
All these events need to be smooth transitions.
My first problem is I can't get any smooth transitions going for the first hover.
My second problem is I have no idea how to achieve the second hover - I've done a lot of Google searches but this doesn't seem to be a common effect.
Here is the code I have tried so far (with fill murray placeholder image):
HTML:
<div class="item">
<a href="#" class="item-link">
<img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
</a>
</div>
CSS:
.item-link:hover:before {
content: '';
display: block;
position: absolute;
width: 58px;
height: 58px;
background-image: url('http://i.imgur.com/bWcylV3.png');
border-radius: 50%;
top: 10px;
right: 10px;
}
And here is the js fiddle
Here is the screenshots for what I want to achieve with the second hover:
Just did a little bit changes in your mark up and and find a solution for your issue. Yes, It's not possible to :hover a pseudo-element. Added a new div btn-plus and a span text for convenience. This is done using pure css. Hope this helps :)
.btn-plus:before {
content: '';
display: block;
position: absolute;
width: 58px;
height: 58px;
background-image: url('http://i.imgur.com/bWcylV3.png');
border-radius: 50%;
top: 0px;
right: 30px;
z-index: 1;
}
.btn-plus{
position: absolute;
display: block;
width: 200px;
height: 58px;
top: 30px;
right: 0;
opacity : 0;
transition: all ease .5s;
}
.item-link{
width: 100%;
height: 100%;
display: block;
}
.item-link img{
width: 100%;
}
span.text{
position : absolute;
top: 0px;
right: 0px;
color: #fff;
padding: 15px;
width: 150px;
height: 30px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
transition: all ease .5s;
opacity : 0;
}
.item-link:hover .btn-plus{
opacity : 1;
}
.btn-plus:hover span{
opacity : 1;
right: 30px
}
<div class="item">
<a href="#" class="item-link">
<img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
<div class="btn-plus">
<span class="text">Add to list</span>
</div>
</a>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have recently started to code again after a long break and now I'm trying hard to see what is it that I'm doing wrong.
I made a JSFiddle here: http://jsfiddle.net/mtsgp3gg/
This is the output I'd like to see: http://puu.sh/jwi3d/233c917986.png
I have a container with 3 images:
<div class="container">
<img src="main picture">
<img id="tape left" src="">
<img id="tape right" src="">
</div>
I would like to put some little "tape thingies" over my main picture using position: relative; and top:0; but so far I failed.
Can anyone point out what I'm doing wrong please?
css position: is somewhat confusing, especially at the start (and it is misused almost 99% of all times).
You use position: relative because you want it to be relative to the container, right? Although this is the obvious behavior, it is not what css does.
position: relative means "I'll give you top/right/... values and want that the element is moved by that amount from where it would occur normally."
You almost always want to use position: absolute which basically means "pick the boundaries of the parent (being specific: the first parent that is not position: static which is the default) and move this element to what I define with top/right/...". (There are more implications like absolute removing the element from the document flow, but that's out of scope at the moment.)
This means you have to
position your container not static. position: relative works fine here, as it does not alter the element if you don't specify top/... .
position your items with position: absolute as they will then be defined relative to their container (not relative to their original position, as they would be with position: relative).
Your example would look like
body {
background: gray;
}
.container {
position: relative;
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
}
.container [id] {
position: absolute;
top: -5px;
}
.container #one {
left: -5px;
}
.container #two {
right: -5px;
transform: rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg">
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
</div>
You're using position:relative when you should be using position:absolute.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container #one {
position: absolute;
top: 0;
left: 0;
transform: translate(-25%, -25%)
}
.container #two {
position: absolute;
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
</div>
That said, I'd prefer not to have presentational images in the HTML at all. So I'd be using pseudo-elements using the same techniques.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container::before {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 0;
transform: translate(-25%, -25%);
z-index: 1;
}
.container::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
</div>
In this way, the presentational part is now in the CSS and the class can be re-used without having multiple instances of the tape image cluttering up your HTML.
Try to use position: absolute; instead of position: relative;
.container #one{
position: absolute;
top: 10px;
left:20px;
}
.container #two{
position: absolute;
top: 10px;
left:215px;
transform: rotate(90deg);
}
Demo here