What element do I need to create black lines in the image ? [![enter image description here][1]][1]
I have written code but I need lines like image (create between images) how can I do this?
Please tell me
My codes are as follows:
using ":after" & ":before" you can set line between two images
.hiw-content .hiw-img img {
width: 100%;
height: auto;
padding: 100px;
}
div#a3:after {
z-index: 999;
content: '';
width: 150px;
background-color: black;
/* left: 0; */
height: 5px;
position: absolute;
right: -80px;
top: 50%;
border-radius: 100px;
}
div#a3:before {
z-index: 999;
content: '';
width: 150px;
background-color: black;
left: -80px;
height: 5px;
position: absolute;
/* right: 50%; */
top: 50%;
border-radius: 100px;
}
div#a3 {
overflow: visible;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
<div class="col-md-4 col-hiw col-hiw-bottom" id="a4">
<div class="hiw-content">
<div class="hiw-img"><img src=""></div>
<span class="hiw-title">Customer Service</span>
<p class="hiw-content">Let our dedicated customer service team take care of any inquiries</p>
</div>
</div>
<div class="col-md-4 col-hiw col-hiw-bottom" id="a3">
<div class="hiw-content">
<div class="hiw-img"><img src=""></div>
<span class="hiw-title">Order fulfilled</span>
<p class="hiw-content">Once a buyer places an order we’ll take care of order production and shipping.</p>
</div>
</div>
<div class="col-md-4 col-hiw col-hiw-bottom" id="a2">
<div class="hiw-content">
<div class="hiw-img"><img src=""></div>
<span class="hiw-title">Boost your sales</span>
<p class="hiw-content">Use Teesprings Boosted Network, Marketing Tools and Partnership Integrations </p>
</div>
</div>
</div>
It is easier to help you if you included more detailed code, the code above really doesn't help, to create a simple line you can do something like this (adjust margin and height/width appropriately) :
.underline {
width: 5rem;
height: 0.25rem;
background: #000;
}
<div class="underline"></div>
Related
So, I have img inside div like this:
<div class="row text-center about__gallery">
<div class="col-xs-12 col-sm-4">
<div class="about__gallery--first img">
<img />
</div>
</div>
.
.
.
</div>
The effect I want to achieve is to have div with color exactly the same size as img behind it (on hover I'm gonna move img a little bit).
SCSS looks like this:
.about__gallery{
margin-top: 5%;
.img{
background-repeat:no-repeat;
background-size:cover;
width:70%;
height:230px;
margin-bottom: 15%;
img{
z-index: 3;
}
&:before {
position: absolute;
content: " ";
display: block;
width: 70%;
height: 230px;
background-color: $color-blue;
z-index: -100;
}
}
.about__gallery--first{
margin-left: 45%;
img{
content:url("../img/aboutus_pic1.png");
width: 100%;
}
}
.
.
Unfortunately result looks like this: DELETED DUE TO REPUTATION
Edit with full code:
<div class="row text-center about__gallery">
<div class="col-xs-12 col-sm-4">
<div class="about__gallery--first img">
<img class="about__gallery__img--bg" />
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="about__gallery--second img">
<img class="about__gallery__img--bg" />
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="about__gallery--third img">
<img class="about__gallery__img--bg" />
</div>
</div>
</div>
And my full .scss looks like this:
.about__gallery{
margin-top: 5%;
margin-bottom: 10%;
.img {
position: relative;
margin-bottom: 15%;
img {
width: 100%;
height: auto;
}
&:before {
position: absolute;
top: 0;
left: 0;
content: " ";
display: block;
width: 100%;
height: 100%;
background-color: $color-blue;
z-index: -100;
}
}
.about__gallery--first{
margin-left: 45%;
margin-bottom: auto;
img.about__gallery__img--bg{
content:url("../img/aboutus_pic1.png");
width: 100%;
}
}
.about__gallery--second{
margin:auto;
img.about__gallery__img--bg{
content:url("../img/aboutus_pic2.png");
width: 100%;
}
}
.about__gallery--third{
margin-left: -15%;
margin-bottom: auto;
img.about__gallery__img--bg{
content:url("../img/aboutus_pic3.png");
width: 100%;
}
}
}
And now my page looks like this:RESULT
My goal is to have something like that on my site:GOAL
Added hover that doesn't work........
codepen.io/Kreha/pen/vmbzPb
A few things I would do. First, remove the static height/widths that you have set. Let the container inherit them from the image. Then, you'll need to set the top/left position of the pseudo element, relative to the position of your container (which should be set to relative). Here's a working example.
<div class="row text-center about__gallery">
<div class="col-xs-12 col-sm-4">
<div class="about__gallery--first img">
<img src="http://placehold.it/250x250" />
</div>
</div>
</div>
.about__gallery {
margin-top: 5%;
.img {
position: relative;
margin-bottom: 15%;
img {
opacity: 0.8; // just to show the blue behind it
width: 100%;
height: auto;
}
&:before {
position: absolute;
top: 0;
left: 0;
content: " ";
display: block;
width: 100%;
height: 100%;
background-color: $color-blue;
z-index: -100;
}
}
&--first {
margin-left: 45%;
}
}
When i do css stuff i usually use Chrome Inspect Element to locate that particular element and try to change it's bg color and on the right side of CIE see css tab where you can see which class specifically is being effected so just simply call that class in your internal or external file and use an image as a background, hope it helps!
I changed the bg color of this current page we are working on, hehe!
.so-header~.container {
background-color: #ccc;
}
Hi I'm trying to create a collage of three images, like the concept shown in this site: https://codepen.io/zacharybrady/pen/aGmFp
The HTML:
<div class="container">
<div class="diagonal" id="d0">
<img src="http://www.shortpacked.com/comics/2013-02-08-prologue.png" />
<p class="overlay">
TEST
</p>
</div>
<div class="diagonal" id="d1">
<img src="http://www.questionablecontent.net/comics/2381.png" />
<p class="overlay">
TEST
</p>
</div>
<div class="diagonal" id="d2">
<img src="http://www.shortpacked.com/comics/2005-01-17-bow-before-your-master.gif" />
<p class="overlay">
TEST
</p>
</div>
<div class="diagonal" id="d3">
<img src="http://www.questionablecontent.net/comics/2021.png" />
<p class="overlay">
TEST
</p>
</div>
<div class="diagonal" id="d4">
<img src="http://www.shortpacked.com/comics/2009-03-27-fourohfour.png" />
<p class="overlay">
TEST
</p>
</div>
</div>
THE CSS:
#import "compass/css3";
#import "compass/css3";
body{
background: blue;
}
.container{
width: 800px;
height: 400px;
background: white;
overflow: hidden;
position: relative;
margin-left: 100px;
.diagonal{
height: 1200px;
width: 200px;
overflow: hidden;
#include rotate(25deg);
position: absolute;
top: -200px;
img{
#include rotate(-25deg);
margin-top: -100px;
margin-left: -200px;
}
.overlay{
#include rotate(-25deg);
height: 1200px;
width: 800px;
position: absolute;
top: -50px;
left: 0;
background: black;
opacity: 0;
color: white;
-webkit-transition: opacity .5s;
vertical-align: middle;
text-align: center;
&:hover{
opacity: .8;
}
}
&#d0{
left: -180px;
}
&#d1{
left: 40px;
}
&#d2{
left: 260px;
}
&#d3{
left: 480px;
}
&#d4{
left: 700px;
}
}
}
Question: How can I add additional transitions that when a specific image is hovered, it will expand to its full width?
PLEASE DON'T MARK this as duplicate or close this for having ambiguous question, because I know and you know the question there is clear and understandable.
You could change the z-axis on hover, so that the full image comes to the front.
I'm trying to build the following component with CSS, but I can't get the first and last point to sit flush against the ends of the line.
It must be able to support an arbitrary number of points (between 1 and 4) and I can't rely on flexbox being there either.
I have a React component that's generating HTML that looks like this:
<div class="row">
<div class="col first" style="width:33%">
<div class="marker complete"></div>
<label>Feedback</label>
</div>
<div class="col" style="width:33%">
<div class="marker partial"></div>
<label>Observation</label>
</div>
<div class="col last" style="width:33%">
<div class="marker review"></div>
<label>Documentation</label>
</div>
</div>
The JavaScript calculates the column sizes before rendering and in my codepen implementation, I'm just centering all the content in each column.
I can sort of hack a solution by using the first and last classes to relatively position the end items, but invariably when the screen size changes, I start to get the edges of the line poking out from behind the points.
Does anyone know of a more sensible layout to start building this with?
My idea would be to set row as display: table-row, and then use a pseudo element to generate the horizontal bar. However, you run into the issue that you cannot know with CSS and HTML alone what the position of the first and last circle is relative to the size of the container. Therefore, it is not possible to use a full width item.
Another approach is using the labels as root items for the pseudo elements. They are always the full width of the column, so they give a nice indication what needs to be used.
The following proposed solution should work with IE9. The only special thing that is used is calc and after. (Instead of calc you can also use a transform: translate if you want.)
The basic idea is to use a table row, which would automatically scale nicely, and then use the labels as roots on which you can build the progress bar.
label:after {
content: "";
height: .5em;
background: #e2e2e2;
width: 100%;
position: absolute;
top: calc((100% - 1.5em) / 2); /* -1 to compensate text, -.5 for height bar */
left: 0;
z-index: -1;
}
.first label:after, .last label:after {
width: 50%;
}
.first label:after {
left: auto;
right: 0;
}
.single label:after {content: none;}
Here ya go. I assume this is what you are looking for.
<div class="row">
<div class="col" style="width:33%">
<div class="marker marker1 complete"></div>
<label>Feedback</label>
</div>
<div class="col2" style="width:33%">
<div class="marker marker2 partial"></div>
<label>Observation</label>
</div>
<div class="col3" style="width:33%">
<div class="marker marker3 review"></div>
<label>Documentation</label>
</div>
</div>
https://jsfiddle.net/norcaljohnny/e6nm2rbv/
*if JS was/is allowed I can put some conditions in it based on number and word length and adjust marker indentions.
Basically I used display blocks, margins and secondary marker classes for each block.
.row {
display: table;
margin: 0 auto;
position: relative;
width: 100%;
}
.col {
display: table-cell;
width: 33%;
text-align: center;
}
.marker {
width: 30px;
height: 30px;
background-color: lightgray;
border-radius: 30px;
margin: 0 auto;
}
.complete {
background-color: blue;
}
.partial {
background-color: blue;
box-sizing: border-box;
border: 8px solid lightgray;
}
.review {
background-color: lightblue;
}
.col:not(:last-child) > .marker:after {
content: '';
display: inline-block;
width: 67%;
height: 0;
border: 3px solid lightgray;
position: absolute;
left: 16.5%;
top: 12.5px;
z-index: -10;
}
/* ------------------------------------------- */
.wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 0 100px;
}
.point {
height: 30px;
background-color: lightgray;
border-radius: 30px;
flex: 0 0 30px;
position: relative;
}
.line {
height: 0;
border: 3px solid lightgray;
flex: 1 0;
}
.blue {
background-color: blue;
}
.lightblue {
background-color: lightblue;
}
.border {
background-color: lightgray;
background-image: radial-gradient(at center center, blue 0, blue 8px, transparent 8px, transparent 100%);
}
.point label {
position: absolute;
left: -50%;
top: 100%;
text-align: center;
}
<h1>Non flex</h1>
<div class="row">
<div class="col first">
<div class="marker complete"></div>
<label>Feedback</label>
</div>
<div class="col">
<div class="marker partial"></div>
<label>Observation</label>
</div>
<div class="col last">
<div class="marker review"></div>
<label>Documentation</label>
</div>
</div>
<h1>Flex</h1>
<div class="wrapper">
<div class="point blue">
<label>Feedback</label>
</div>
<div class="line"></div>
<div class="point blue border">
<label>Observation</label>
</div>
<div class="line"></div>
<div class="point lightblue">
<label>Documentation</label>
</div>
</div>
I would like to achieve the following:
Have a fluid container with one background color on each side - but the separator should be two cols in the inside container.
I tried to describe it in this picture. Is this even possible?
use css positions and after/before see the link below:
Codepen
.container {
background: #ddd;
height: 250px;
}
.extra1 {
height: 250px;
background: #fff;
position: relative;
z-index: 999;
}
.extra2 {
height: 250px;
background: #000;
}
.extra1:before {
content: '';
background: yellow;
position: absolute;
width: 300%;
top: 0px;
height: 100%;
left: -200%;
}
.extra2:before {
content: '';
background: green;
position: absolute;
width: 300%;
top: 0px;
height: 100%;
right: -200%;
}
.your-things {
position: absolute;
left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 extra1">
<div class="your-things">
<p>.col-md-4</p>
</div>
</div>
<div class="col-md-8 extra2">
<div class="your-things">
<p>.col-md-8</p>
</div>
</div>
</div>
</div>
This can be done using psuedo element before and after on .container-fluid class or give any other class name.
Here is a code pen demo:
`http://codepen.io/duptitung/pen/adNOpV`
ya, you can give background image of the specific color and place it on that specific region
css
.container-fluid{
background:url( //image link// );
background-position: // arrange image // ;
background-size: auto 100%;
}
i have problem witn an icon (Loop icon) who goes out the screen when i resize the browser and that's create a white margin left , i'm using bootstrap and less , i i putted a Link to the page for you to see my problem and this is the code too
HTML
<body>
<header class="top-header">
<div class="container">
<div class="row">
<div class="span6">
<h1 class="logo">
Caspevi
</h1>
<h2>Le Moteur de recherche</h2>
</div>
<div class="span6"></div>
</div>
</div>
<!-- end container -->
</header>
<!-- Recherche générale -->
<section>
<div class="section-form1">
<div class="container">
<form action"/" method="post" class="genaral-form">
<p class="contour">
</p>
</form>
</div>
</div>
</section>
<!-- recherche personaliser -->
</body>
CSS
.section-form1 {
background: url('../image/background_top.png') no-repeat center;
background-color: #000;
width: 100%;
height: 694px;
a {
background: url('../image/forme_serche.png');
width: 61px;
height: 61px;
position: absolute;
top: -40px;
left: 413px;
&:hover {
background: url('../image/forme_serche_hover.png');
}
}
}
.contour {
position: relative;
height: 239px;
border: 1px solid white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-left: 120px;
margin-right: 120px;
margin-top: 80px;
}
I advise that you need to change the position from absolute to relative. You can then use a float:left and a width-margin that is a percentage.
You have just to replace this line. The absolute position have to be from right :
.section-form1 a {
...
left: 413px;
}
by
.section-form1 a {
...
right: -27px;
}
Regards
Like the above answer, it is just problem with position: absolute. I would recommend you to not use position: "absolute" or "fixed" just in special cases. You will have a lot of problems with responsive/fluid designs.