I'm trying to list some images, and for each image I want to have a caption, with some details, let's say the title, the problem right now is that the width of the caption is relative to the parent div which is normal, but I want it to be relative to the image width, but since I have the class img-responsive on the img I don't know how to achive this. Maybe you guys can help me out.
Here is a live example: http://jsbin.com/cudugize/1/edit?html,css,output
Here is the code
HTML
<div class="col-sm-3 col-xs-6 col-md-2 col-lg-3">
<div class="thumbnail">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
<div class="caption img-responsive">
<h4 class="text-center">Nice title</h4>
<p class="text-center"><span class="glyphicon glyphicon-globe"></span> usa</p>
</div>
</div>
<div class="thumbnail">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
<div class="caption img-responsive">
<h4 class="text-center">Nice title</h4>
<p class="text-center"><span class="glyphicon glyphicon-globe"></span> usa</p>
</div>
</div>
</div>
CSS
Aditional bootstrap core css
.thumbnail{
position: relative;
width: 100%;
border: none !important;
}
.thumbnail .caption{
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.50);
width: 100%;
padding: 0px !important;
}
http://jsbin.com/cudugize/7
please see my demo code, it archived your demand.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tc {
text-align:center;
}
.thumbnail {
position: relative;
display:inline-block;
*display:inline;
*zoom:1;
border: none;
margin:0 auto;
padding:0;
}
.thumbnail .caption {
position: absolute;
bottom: 0px;
background: rgba(0, 0, 0, 0.50);
width: 100%;
padding: 0px !important;
}
</style>
</head>
<body>
<div class="col-sm-3 col-xs-6 col-md-2 col-lg-3">
<div class="tc">
<div class="thumbnail">
<a href="url">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
</a>
<div class="caption img-responsive">
<h4 class="text-center">Nice title
</h4>
<p class="text-center">
<a href="#" class="homepage city text-uppercase">
<span class="glyphicon glyphicon-globe"></span>usa</a>
</p>
</div>
</div>
</div>
<div class="tc">
<div class="thumbnail">
<a href="url">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
</a>
<div class="caption img-responsive">
<h4 class="text-center">Nice title
</h4>
<p class="text-center">
<a href="#" class="homepage city text-uppercase">
<span class="glyphicon glyphicon-globe"></span>usa</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
This CSS should do the trick:
.thumbnail {
display: inline-block;
position: relative;
border: none !important;
padding: 0;
}
.thumbnail .caption{
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.50);
width: 100%;
padding: 0px !important;
}
Related
I am attempting to use media queries in my _Layout.cshtml to determine which Nav bar is displayed.
On larger devices I want to display a vertical nav bar using Bootstrap (col-2) and I want to RenderBody() (col-10) with the Horizontal nav bar not displayed.
On smaller devices the Horizontal nav bar is displayed the full width of the screen and RenderBody() would be below.
I'm not sure if the media queries actually work because the following error is displayed.
The "RenderBody" method has already been called.
So my question is how can I conditionally Render based on the size of the screen?
Please note that I'm just trying to piece this together as I go and am by no means an expert. Far from it.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#* #Styles.Render("~/Content/css") *#
#*#Styles.Render("~/Content")*#
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/animate.min.css" rel="stylesheet">
<link href="~/Content/ionicons.min.css" rel="stylesheet">
<link href="~/Content/owl.carousel.min.css" rel="stylesheet">
<link href="~/Content/magnific-popup.css" rel="stylesheet">
<link href="~/Content/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="~/Content/strap4.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="~/Content/style.css" rel="stylesheet">
<link href="~/Content/pure.css" rel="stylesheet">
</head>
<body>
<!--==========================
Top Bar
============================-->
<section id="topbar" class="d-none d-lg-block">
<div class="container clearfix">
<div class="contact-info pull-left">
<i class="fa fa-envelope-o"></i> shipleyswine#yahoo.com
<i class="fa fa-phone"></i> Orders: 1-866-376-8986 (Toll Free) • 740-745-2911
</div>
<div class="social-links pull-right">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</section>
<!--==========================
Header
============================-->
<header id="header">
<div class="container">
<div id="logo" class="pull-left">
<img src="~/Assets/Images/ssHeader.png" height="40px" width="150px">
</div>
<!-- #nav-menu-container -->
</div>
</header><!-- #header -->
<div id="HorizontalNav" class="container">
<div class="">
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Yorkshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/york.jpg" /><div id="imageText"class="w-100 h-100">Yorkshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Duroc" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/duroc.jpg" /><div id="imageText"class="w-100 h-100">Duroc</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Berkshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/berk.jpg" /><div id="imageText"class="w-100 h-100">Berkshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Exotic" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/exotic.jpg" /><div id="imageText"class="w-100 h-100">Exotic</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Hampshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/hamp.jpg" /><div id="imageText"class="w-100 h-100">Hampshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="#Url.Action("SelectBoar", "Boars", new { selectedBreed = "Other" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/Other.jpg" /><div id="imageText"class="w-100 h-100">Other</div>
</a>
</div>
</div>
</div>
<a href="#">
<div id="salealert" class="alert alert-danger" role="alert">
Summer Pricing, Most Boars up to 50% off!
</div>
</a>
<div id="VerticleNav" class="row">
<div class="col-lg-2 col-md-3 col-sm-3">
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected text-center">Boars</li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/york.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Yorkshire</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/duroc.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Duroc</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/berk.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Berkshire</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/exotic.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Exotic</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/hamp.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Hampshire</div></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/Other.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Other</div></li>
</ul>
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-9">
#RenderBody()
</div>
</div>
<div id="HorizontalNav">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
CSS
#media (min-width: 320px) and (max-width: 480px) {
#HorizontalNav{
display:block;
}
#VerticleNav{
display:none;
}
}
#media (min-width: 481px) and (max-width: 767px) {
#HorizontalNav {
display: block;
}
#VerticleNav {
display: none;
}
}
#media (min-width: 768px){
#HorizontalNav {
display: none;
}
#VerticleNav {
display: inline-block;
}
}
#imageText {
position: absolute;
color: white;
top: 0;
/* left: 0; */
/* right: 0; */
/* bottom: 0; */
/* transform: translate(-50%, -50%); */
font-size: 1rem;
margin-top: 40%;
padding-left:2.5px;
padding-right:2.5px;
}
.breedMenu {
width: 100%;
height: 100%;
max-height: 100%;
}
.breedOption {
width: 16.66%;
max-width: 16.66%;
min-width: 16.66%;
float: left;
height: 100%;
max-height: 100%;
background: center;
background-repeat: no-repeat;
text-align: center;
color: white;
}
.boarlabel {
padding-top: 83px;
padding-bottom: 0px;
font-family: AmericanCaptain, Calibri, sans-serif;
font-size: 14pt;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.breedOption:hover {
cursor: pointer;
color:black;
}
.breedOption a {
text-decoration: none;
color: inherit;
}
.listcontainer{
height:auto;
}
#salealert {
text-align:center;
font-size:large;
margin-top:20px;
}
#salealert:hover {
background-color: #ffe6e6;
}
You can use renderbody once. If you need a second renderbody, you can use RenderSection instead. Simply explained in the link.
https://exceptionnotfound.net/asp-net-mvc-demystified-layout-viewstart-renderbody-and-rendersection/
I have been trying to create a responsive menu for the mobile browser of my site and it has four links. I have given 25% width for each of them. The problem is, although its logos stay center their titles don't. You can notice for the snippet that the titles are not in the center of their div.
What is the problem here? What am I doing wrong? Can you suggest how can I keep these titles center as well?
this is the current state:
I'm trying to make it something like this:
The snippet:
.menu {
position: fixed;
bottom: 0;
width: 100%;
background-color: #434A54;
color: white;
font-size: 12px;
padding-top: 7px;
}
a.main-link:link,
a.main-link:visited {
background-color: #434A54;
color: white;
text-decoration: none;
display: inline-block;
width: 25%;
}
.logo {
width: 24px;
height: 24px;
margin-left: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container menu">
<div class="row">
<a href="start.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK1
</div>
</a>
<a href="calculator-home.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK222
</div>
</a>
<a href="contact.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK33333
</div>
</a>
<a href="about.html" class="main-link">
<div class="col-3"> <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo"/> <br>
LINK4444444
</div>
</a>
</div>
</div>
Columns should be direct child of rows.
Add text center class to the columns. Put the anchor tag inside of columns and make it display:block. And the image and menu title should be placed inside the anchor tag.
/*This css is not required. */
img{
width:25px;
height:25px;
}
a.main-link:link,
a.main-link:visited {
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
<div class="col-3 text-center">
<a href="start.html" class="main-link d-block">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo " />
<div> LINK1 </div>
</a>
</div>
</div>
</div>
If you change the html code and add the image before the text inside the anchor tag then add text-align: center you'll get the same result
check my code:
.menu {
position: fixed;
bottom: 0;
width: 100%;
background-color: #434A54;
color: white;
font-size: 12px;
padding-top: 7px;
}
.main-link {
text-align: center
}
a.main-link:link,
a.main-link:visited {
background-color: #434A54;
color: white;
text-decoration: none;
display: inline-block;
width: 25%;
}
.logo {
width: 24px;
height: 24px;
margin-left: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container menu">
<div class="row">
<a href="start.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /><br />
<span class="col-3">LINK1
</span>
</a>
<a href="calculator-home.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /> <br>
<span class="col-3">LINK222
</span>
</a>
<a href="contact.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /> <br>
<span class="col-3">LINK33333
</span>
</a>
<a href="about.html" class="main-link">
<img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" class="logo" /><br />
<span class="col-3">LINK4444444
</span>
</a>
</div>
</div>
I'm trying to create a div which contains a text box with 3 columns with text and images below them. like in the first image I have attached. Including the lines that divide the and if possible the small question marks as well!
Currently this is where I am in image 2,
I have attached a JSFiddle file however it does not contain the images as they are not online:
https://jsfiddle.net/5xzg78je/
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="box">
<img src="iphone.png">
<div class="row">
<div class="column">How many would you like to insure <img src="10.png" class="textimage">
<br> Total value when new <img src="10000.png" class="textimage"><br> Would you like instant replacement <img src="replacement.png" class="textimage">
</div>
</div>
</div>
</div>
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height: 40px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
Try below one.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<style>
.box p i {position: absolute;padding-left: 5px;}
.box img {margin:0 auto;}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I know this post is old, but here is a better solution.
Html:
<table>
<tr class="v-line">
//Content
</tr>
<tr class="v-line">
//Content
</tr>
<tr>
//Content
</tr>
</table>
CSS:
.v-line {
padding-right: 2em;
border-right: 1px solid rgb(185, 185, 185);
}
The v-line class is a bit dirty, but this is easy and basic HTML code.
im trying to create a overlay color to my images products, basically the overlay color will appear when i make hover to the images, but isnt working.
The idea is when i pass the mouse over the images a transparecy the title and price appears with the overlay color
Here is my code:
html:
<!-- List of products -->
<div id="products" class="row list-group">
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="images/products/1.png" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<div class="row go-bottom">
<div class="col-xs-12">
<p class="price">
80 € / 120 €</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="images/products/1.png" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Product title</h4>
<div class="row go-bottom">
<div class="col-xs-12">
<p class="price">
80 € / 120 €</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail overlay">
<img class="group list-group-image" src="images/products/1.png" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Color Gold
</h4>
<div class="row go-bottom">
<div class="col-xs-12">
<p class="price">
80 € / 120 €</p>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.thumbnail:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.thumbnail:hover:after {
opacity:1;
}
.list-group-item:hover{
background:rgba(0,0,0,.7);
}
.shop-products .item .thumbnail{
border:none;
padding:0;
position: relative;
}
.shop-products .item .thumbnail .caption{
position: absolute;
bottom:0;
width: 100%;
height: 100%;
text-align: center;
}
h4.list-group-item-heading{
text-transform: uppercase;
font-weight: bold;
color:red;
letter-spacing: 3px;
}
.shop-products .item .thumbnail .caption .price{
color:red;
font-size:16px;
letter-spacing: 3px;
}
.go-bottom{
bottom:0px;
position: absolute;
width: 100%;
}
I'm not able to find the class list-group-item inside your code.
the caption should have the background-color.
.shop-products .item .thumbnail .caption{
position: absolute;
bottom:0;
left:0;
width: 100%;
height: 100%;
text-align: center;
display:none;
background:rgba(0,0,0,.7);
}
.shop-products .item .thumbnail:hover .caption{
display:block;
}
I am trying to write css code according to this image:
However, I don't know how to make two divs in one line, and hard to write code to make them exactly the same, tried many times. Could someone help me on that?
Here is my code:
<div class="media-card">
<div class="row">
<div class="col-sm-4 col-md-4">
<img class="img-responsive" src="{{ asset('images/twitter-icon-lg.png') }}">
</div>
<div class="col-sm-8 col-md-8">
<div class="media">
<a class="pull-left" href="#">
<img class="media-photo" src="{{ asset('images/header.png') }}" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Matrix User</h4>
<p><span class="">#MatrixUser</span></p>
</div>
</div>
<div><span class="">2k followers</span></div>
</div>
</div>
<div>
<p>Approval required to publish</p>
<button>Select</button>
</div>
</div>
Here is the css part:
.block-inline {
display: inline-block;
}
.media-size {
height: 120px;
width: 90px;
border: 1px solid #CCCCCC;
}
.media-photo {
width: 45px;
}
Please try below code and keep in mind media class is already in bootstrap so always use other class:
HTML
<div class="media-card">
<div class="row2">
<div class="col-sm-4 col-md-4">
<img class="img-responsive" src="{{ asset('images/twitter-icon-lg.png') }}">
</div>
<div class="col-sm-8 col-md-8 media-right">
<a class="pull-left" href="#">
<img class="media-photo" src="{{ asset('images/header.png') }}" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Matrix User</h4>
<p><span class="">#MatrixUser</span></p>
</div>
<span class="">2k followers</span>
</div>
</div>
<p>Approval required to publish</p>
<button>Select</button>
</div>
CSS
.row2{
overflow:hidden;
}
.media-card{
width:630px;
background:#F7F7F7;
}
.media-card div{
border:1px solid #ccc;
}
.media-right{
padding-left:0px;
padding-right:0px;
}
.block-inline {
display: inline-block;
}
.media-size {
height: 120px;
width: 90px;
border: 1px solid #CCCCCC;
}
.media-photo {
width: 45px;
}