I have some problem in creating arrow styles through css after content.
Please find the code below. Requirement is to add the arrow at the end of the text A++. For example please click on this url and see what i needed to achieve. https://images.clasohlson.com/web/images/energy/apphighest.png.
Could you please suggest how to achieve this? do we need to add any :before and :after on product-marker level to achive this requirement?
.product-markers {
position: static;
display: block;
overflow: hidden;
bottom: 80px;
right: -1px;
width: auto;
height: auto;
opacity: 1;
transition: opacity 0.2s linear 0s;
}
.product-markers .product-marker {
position: static;
max-width: 100%;
float: left;
text-align: left;
line-height: 10px;
margin-bottom: 3px;
padding: 0;
border: none;
left: 10px;
bottom: 10px;
height: auto;
margin: 0;
font-family: "HM Ampersand Bold", Arial, sans-serif;
letter-spacing: 0px;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
color: #fff;
text-transform: uppercase;
}
.product-markers .product-marker.energy {
--border-right: 20px solid #19945f;
font-size: 11px;
}
.product-markers .product-marker.energy .wrapper {
background: #19945f;
}
.product-markers .product-marker .wrapper {
padding: 4px 0 5px;
position: relative;
left: 1px;
}
.product-markers .product-marker.energy .wrapper .inner {
position: static;
display: block;
overflow: hidden;
padding: 10px;
background: #19945f;
}
.product-markers .product-marker .wrapper .inner {
position: relative;
left: 9px;
}
<div class="product-markers">
<div class="product-marker energy">
<span class="wrapper">
<span class="inner">A++</span>
</span>
</div>
</div>
Here is an example how to use the CSS triangle (Jesse de Bruijne's idea)
.product-markers {
position: static;
display: block;
overflow: hidden;
bottom: 80px;
right: -1px;
width: auto;
height: auto;
opacity: 1;
transition: opacity 0.2s linear 0s;
}
.product-markers .product-marker {
position: static;
max-width: 100%;
float: left;
text-align: left;
line-height: 10px;
margin-bottom: 3px;
padding: 0;
border: none;
left: 10px;
bottom: 10px;
height: auto;
margin: 0;
font-family: "HM Ampersand Bold", Arial, sans-serif;
letter-spacing: 0px;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
color: #fff;
text-transform: uppercase;
}
.product-markers .product-marker.energy {
--border-right: 20px solid #19945f;
font-size: 11px;
}
.product-markers .product-marker.energy .wrapper {
background: #19945f;
}
.product-markers .product-marker .wrapper {
padding: 4px 0 5px;
position: relative;
left: 1px;
}
.product-markers .product-marker.energy .wrapper .inner {
position: static;
display: inline-block;
overflow: hidden;
padding: 10px;
background: #19945f;
float:left;
}
.product-markers .product-marker .wrapper .inner {
position: relative;
left: 9px;
}
.product-markers .product-marker .wrapper .arrow {
content: "";
display: inline-block;
width: 0;
height: 0;
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
border-left: 15px solid #19945f;
float: left;
}
<div class="product-markers">
<div class="product-marker energy">
<span class="wrapper">
<span class="inner">A++</span>
<span class="arrow"></span>
</span>
</div>
</div>
Related
When I hover over search icon, div with class "forma" expands and pushes the list with links to the left. How can I prevent this? My guess is something to do with position, display or width, but I am not sure. This is probably not a complicated task, but I am not very good with CSS.
Here is HTML:
<nav>
<div class=logo>
<img src="images/logoicon.png" alt="sunce">
<img src="images/logotext.png" alt="outdoors" id="logotext"></a>
</div>
<ul class="nav-ul">
<li>Destinations</li>
<li>Travel style</li>
<li>Trabel deals</li>
<li>Gear</li>
</ul>
<div class="forma">
<input type="search" placeholder="search" class="pretraga">
<i class="fa fa-search"></i>
</div>
</nav>
Here is CSS:
nav {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
position: sticky;
top: 0;
z-index: 2;
}
.nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333; */
}
.nav-ul li {
display: inline;
float: left;
}
.nav-ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-ul li:last-child {
float: right;
}
.nav-ul li a:hover:not(.active) {
background-color: #111;
}
.forma {
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 30px;
outline: 0;
border: 0;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.fa {
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
color: black;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
.forma:hover {
width: 200px;
cursor: pointer;
}
.forma:hover input {
display: block;
}
Try below CSS here I have changed little bit code
Your Code
.forma {
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 30px;
outline: 0;
border: 0;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.forma:hover {
width: 200px;
cursor: pointer;
}
.forma:hover input {
display: block;
}
Updated Code
Add this link in your HTML page for icon
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
.forma {
height: 50px;
width: 250px;
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
}
input {
position: absolute;
right: 21px;
width: 90px;
max-width: 350px;
transition: all 1s;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
outline: 0;
}
input:focus{
outline: 0;
}
input:hover{
width: 350px;
}
You can check Live preview
nav {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
position: sticky;
top: 0;
z-index: 2;
}
.nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333; */
}
.nav-ul li {
display: inline;
float: left;
}
.nav-ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-ul li:last-child {
float: right;
}
.nav-ul li a:hover:not(.active) {
background-color: #111;
}
.forma {
height: 50px;
width: 250px;
position: relative;
top: 20px;
left: 20px;
transform: translate(0, -50%);
}
input {
position: absolute;
right: 21px;
width: 90px;
max-width: 350px;
transition: all 1s;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
outline: 0;
}
.fa {
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
position: absolute;
top: 5px;
right: 20px;
border-radius: 50%;
color: black;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
input:focus{
outline: 0;
}
input:hover{
width: 350px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<div class=logo>
<img src="images/logoicon.png" alt="sunce">
<img src="images/logotext.png" alt="outdoors" id="logotext">
</div>
<ul class="nav-ul">
<li>Destinations</li>
<li>Travel style</li>
<li>Trabel deals</li>
<li>Gear</li>
</ul>
<div class="forma">
<input type="search" placeholder="search" class="pretraga">
<i class="fa fa-search"></i>
</div>
</nav>
you can check Here
NOTE : Better view on desktop you have to write code for mobile also with #media rule
I am trying to emulate this nutrition label format in CSS, but I can't get the shapes right at all. The best I can come up with is fiddling with border-radius, but that gives me more of a pill shape, and still not way to get the black cut-out shape at the bottom. Has anyone replicated such a nutrition label in CSS? Would anyone be willing to try? Any help would be greatly appreciated.
Here is a link to what I have so far: jsfiddle.net/f5jczunf/
#block {
border-radius:50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color:#FFF;
text-align:center;
}
.number {
font-weight:bold;
font-size:18pt;
text-align:center;
}
<div id="block">
<span class="number">150</span>
<br/>Calories
</div>
Maybe this small example can help.
.label {
position: relative;
width: 100px;
height: 140px;
text-align: center;
border: 1px solid #000;
border-radius: 100px/50px;
overflow: hidden;
}
.title {
display: inline-block;
margin-top: 30px;
}
.bottom {
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 50px;
color: #fff;
line-height: 40px;
border-top: 1px solid #000;
border-radius: 100px/50px;
background-color: #000;
}
<div class="label">
<span class="title">Title</span>
<span class="bottom">Bottom</span>
</div>
https://jsfiddle.net/9xs2wcbL/1/
Here's my take on it. It does require some advanced, bleeding edge CSS, however.
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
body {
padding: 3em;
font-size: 16px;
font-family: 'Open Sans Condensed', sans-serif;
}
.label-list {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.label-list .label-item {
text-align: center;
border: 1px solid;
position: relative;
border-radius: 2em / 0.65em;
padding: 0.2em 0.25em 1.5em;
min-width: 3.5em;
overflow: hidden;
margin: 0.1em;
z-index: 1;
background: white;
color: black;
}
.label-list .label-item h1 {
font-size: 3em;
line-height: 1em;
font-weight: 900;
margin: 0;
}
.label-list .label-item h1.smaller {
font-size: 1.75em;
margin-top: 0.5em;
}
.label-list .label-item h1 small {
font-size: 0.4em;
text-transform: none;
}
.label-list .label-item small {
font-size: 1em;
line-height: 1em;
font-weight: 900;
text-transform: uppercase;
}
.label-list .label-item span {
position: absolute;
bottom: 0.5em;
left: 0;
right: 0;
color: white;
font-size: 0.8em;
line-height: 1em;
}
.label-list .label-item span:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: black;
z-index: -1;
border-radius: 40%;
transform-origin: center;
width: 100%;
height: 0;
padding-top: 100%;
margin: auto;
transform: rotate(45deg) translate(20%, 20%);
}
<div class="label-list">
<div class="label-item">
<h1>140</h1>
<small>Calories</small>
</div>
<div class="label-item">
<h1 class="smaller">1<small>g</small></h1>
<small>Sat Fat</small>
<span>5% DV</span>
</div>
</div>
I believe the only way to have this sort of shape in pure CSS is with a few overlapping shapes, something similar to the code below:
.wrapper {
position: relative;
height: 112px;
width: 80px;
overflow: hidden;
}
.rectangle,
.circle {
position: absolute;
box-sizing: border-box;
}
.rectangle {
height: 96px;
width: 80px;
top: 8px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.circle {
width: 200px;
height: 200px;
left: -60px;
border-radius: 200px;
border: 1px solid black;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class="wrapper">
<div class="circle top"></div>
<div class="rectangle"></div>
<div class="circle bottom"></div>
</div>
https://jsfiddle.net/dylanstark/01hck5dv/
here my approach for that. I'm using before and after pseudo-elements.
before contains black bg with border-radius and it is overflowing the main #block which has overflow: hidden;.
aftercontains text that is coming from data-text attribute of #block
#block {
border-radius: 50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color: #FFF;
text-align: center;
position: relative;
overflow: hidden;
}
#block:before {
display: block;
content: " ";
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 50px;
border-radius: 50%;
background: black;
z-index: 0;
}
#block:after {
display: block;
content: attr(data-label);
position: absolute;
bottom: 5px;
color: white;
text-align: center;
z-index: 1;
}
.number {
font-weight: bold;
font-size: 18pt;
text-align: center;
}
<div id="block" data-label="5% DY">
<span class="number">150</span>
<br/>Calories
</div>
My image is inside a well which has fixed width fixed.
(1) How to get my image always horizontally centered (I tried using
margin:0 auto but it didnt work).
(2) Also I have an .overlay
and it works for all my other images (which have the
max-width:300px, but for images as in example with smaller width,
I need the overlay to also cover a full max-width of the well (now as in this example, the overlay is limited to the width of these smaller-width images). How to make
these 2 things possible?
.image-video-linkcar {
position: relative;
display: inline-block;
}
.image-video-linkcar img {
max-width: auto;
max-height: 230px;
margin: 0;
padding: 0;
vertical-align: middle;
}
.categorycar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat',sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #FFF;
opacity: .9;
position: absolute;
opacity: .7;
bottom: 0;
right: 0;
min-height: 0;
}
.brandcar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat',sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #fff;
opacity: .9;
position: absolute;
opacity: .7;
top: 0;
right: 0;
min-height: 0;
}
.image-video-linkcar:hover .overlay {
opacity: 1;
}
.well.carousel {
width: 100%;
height: auto;
height: 420px;
width: 400px;
padding: 0;
margin: 0;
border: none;
background-color:red
}
.product-detailscar .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #F7F7F7;
color: #FFF;
padding: 10px;
border-top: 1px solid #A10000;
border-bottom: 1px solid #A10000;
/*vertical-align: middle;*/
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
/*padding: 25px;
text-align: center;*/
}
<div class="well carousel">
<div class="product-detailscar">
<div class="image-video-linkcar">
<img alt="#" src=
"http://lorempixel.com/100/200">
<div class="brandcar">
BRAND
</div>
<div class="categorycar">
CATEGORY
</div>
<div class="overlay">
<div class="subcategorycar">
SUBCAT
</div>
<div class="idcar">
ID
</div>
You need to move the overlay out of the .product-detailscar div.
.well {
width: 300px;
background: orange;
position: relative;
text-align: center;
}
.image-video-linkcar {
position: relative;
display: inline-block;
}
.image-video-linkcar img {
max-width: auto;
max-height: 230px;
margin: 0;
padding: 0;
vertical-align: middle;
}
.categorycar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #FFF;
opacity: .9;
position: absolute;
opacity: .7;
bottom: 0;
right: 0;
min-height: 0;
}
.brandcar {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: #fff;
opacity: .9;
position: absolute;
opacity: .7;
top: 0;
right: 0;
min-height: 0;
}
.well:hover .overlay {
opacity: 1;
}
.well .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: rgba(0, 255, 0, .5);
color: #FFF;
padding: 10px;
border-top: 1px solid #A10000;
border-bottom: 1px solid #A10000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well carousel">
<div class="product-detailscar">
<div class="image-video-linkcar">
<img alt="#" src="http://www.fillmurray.com/100/200">
<div class="brandcar">
BRAND
</div>
<div class="categorycar">
CATEGORY
</div>
</div>
</div>
<div class="overlay">
<div class="subcategorycar">
SUBBBBBBCATEGORY
</div>
<div class="idcar">
IDDDDCAR
</div>
</div>
</div>
I am trying to place content-desc div to the bottom of content-box-inner but it's not placing there, it's going just after the image:
.content-box-inner {
position: relative;
display: inline-block;
width: 360px;
height: 460px;
background-color: #fff;
margin-right: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.content-box-inner > img {
width: 200px;
margin-top: 10px;
border: 1px solid #ddd;
padding: 8px;
}
.content-title {
position: relative;
height: 35px;
background-color: #FFB400;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}
.content-title > p {
text-align: center;
line-height: 35px;
font-family: verdana;
color: #222;
font-weight: bold;
letter-spacing: 0.02em;
text-transform: capitalize;
}
.content-desc {
position: relative;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
.content-desc > p {
font-family: verdana;
letter-spacing: 0.04em;
font-size: 15px;
padding: 8px;
}
<div class="content-box-inner">
<div class="content-title">
<p>text</p>
</div>
<img src="img.jpg">
<div class="content-desc">
<p>some text</p>
</div>
</div>
Does anyone know, what I did wrong in my CSS?
Have you tried using position: absolute;? adding position: absolute; bottom: 0; should fix your issues.
Change
.content-desc {
position: relative;
...
}
to
.content-desc {
position: absolute;
...
}
you will want your .content-desc to be set to absolute positioning:
.content-box-inner {
position: relative;
display: inline-block;
width: 360px;
height: 460px;
background-color: #fff;
margin-right: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.content-box-inner > img {
width: 200px;
margin-top: 10px;
border: 1px solid #ddd;
padding: 8px;
}
.content-title {
position: relative;
height: 35px;
background-color: #FFB400;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}
.content-title > p {
text-align: center;
line-height: 35px;
font-family: verdana;
color: #222;
font-weight: bold;
letter-spacing: 0.02em;
text-transform: capitalize;
}
.content-desc {
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
.content-desc > p {
font-family: verdana;
letter-spacing: 0.04em;
font-size: 15px;
padding: 8px;
}
see link to fiddle here: https://jsfiddle.net/john_h/w05hwuxp/
I am able to display two span text elements over the image when I hover over with my cursor successfully. But I am having trouble placing a button that is centered over the image, below the project name. Any help would be appreciated. I should also note the button that I want to use is from a Bootstrap 3 class.
Here is a demo: https://jsfiddle.net/oo1xx006/3/
Here is an example of what I want to create: http://www.devonstank.com/
HTML:
<div class="latest_projects">
<!-- My latest projects -->
<h1>My latest projects</h1>
<br>
<ul class="projects-list">
<li>
<img src="img/mudmat-global-model.jpg" alt="DOF Mudmat Lowering" width="380px" height="380px"/>
<span class="text-content">
<span class="project-type"><i>Project Type</i></span>
<span class="project-name">Project Name</span>
<!-- <span>View project</span> -->
</span>
</li>
</ul>
<br>
View more projects
</div>
CSS:
body {
padding-top: 0;
font-family: 'PT Sans', sans-serif;
background-color: white;
}
h1 {
/* margin: 15px 0;*/
font-size: 1.9em;
font-weight: normal;
color: #000;
line-height: 120%;
text-align: center;
}
h2 {
font-size: 1.3em;
margin: -5px 0 0;
font-weight: normal;
color: #000;
text-align: center;
}
a {
text-decoration: none;
color: #000;
font-weight: bold;
}
a:hover {
text-decoration: none;
}
p {
line-height: 200%;
padding: 0 10% 0 10%;
font-size: 1.1em;
text-align: center;
}
.btn-default {
border-color: #000;
border-radius: 0;
border-width: 2px;
color: #000;
font-size: 1.5em;
}
.btn-default:hover {
color: #fff;
background-color: #000;
border-color: #000;
border-radius: 0;
border-width: 2px;
}
img {
max-width: 100%;
}
/************************************
HOME
************************************/
.latest_projects {
text-align: center;
max-width: 1200px;
margin: 0 auto;
}
.latest_projects p {
margin: 0;
color: transparent;
}
.fluid-container img {
height: 350px;
width: 350px;
margin-bottom: 20px;
vertical-align: middle;
}
/*******Project Images******/
ul.projects-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.projects-list li {
display: inline-block;
height: 380px;
position: relative;
width: 380px;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 380px;
left: 0;
position: absolute;
top: 0;
width: 380px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 380px;
left: 0;
position: absolute;
top: 0;
width: 380px;
opacity: 0;
}
ul.projects-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 380px;
left: 0;
position: absolute;
top: 0;
width: 380px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.project-type {
position: absolute;
text-align: center;
/*margin: 25px 0;*/
padding: 120px;
width: 380px;
vertical-align: middle;
font-size: 1.7em;
}
span.project-name {
font-size: 2.5em;
}
span.view-project {
position: absolute;
text-align: center;
/*margin: 25px 0;*/
padding: 10px;
width: 380px;
vertical-align: middle;
font-size: 1.7em;
}
You can do that with Javascript. Basically you have a container, inside which you need to see/use extra content if you hover on it. I suggest that you should add the needed html, but with display: none; CSS rule, and then you need to show it when the user hovers the container and hide it if the use leaves the container. This is how you can do it with jQuery:
$(".yourcontainerclass").mouseenter(function() {
$(this).find(".yourinnerclass").hide();
});
$(".yourcontainerclass").mouseout(function() {
$(this).find(".yourinnerclass").show();
});