When I add the bootstrap 3 'thumbnail' item to the class for my div it doesn't show. Here is my exact CSS3 markup. Same goes for the jumbotron.
.thumbnail {
display: block;
padding: 4px;
width: 500px;
height: 220px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #3f0070;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="~/images/photo.png" alt="...">
</a>
</div>
</div>
The Bootstrap 3 dependency files were bugged. I reinstalled using Nuget package manager. Now, everything is back to default. Thanks.
Related
This question already has answers here:
Change text color if background image is not white?
(1 answer)
Dual-Color Text
(2 answers)
Closed 4 years ago.
I want to change text color to white for the 9 cards text part that overlaps with moving background element. How do I achieve this?
I looked on mix-blend-mode: screen; but it not seems to be applicable for this case. Here I exported compiled css/html for code snippet:
.wrapper {
padding: 30px 0;
}
.chapter {
margin-bottom: 20px;
min-height: 200px;
border-radius: 6px;
background-color: #f6f8f9;
padding: 50px 60px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.chapter__title {
z-index: 1;
position: relative;
font-size: 24px;
font-weight: 500;
line-height: 1.25;
color: #444;
text-decoration: none;
transition: color 0.4s ease-in;
}
.chapter__link,
.chapter a {
z-index: 1;
position: relative;
font-size: 20px;
font-weight: 300;
line-height: 1.5;
transition: color 0.4s ease-in;
}
.chapter__link i,
.chapter a i {
font-size: 60%;
margin-left: 5px;
position: relative;
bottom: -2px;
}
.chapter__label {
position: absolute;
right: 15px;
top: 10px;
font-size: 14px;
text-transform: uppercase;
z-index: 1;
}
.chapter__label--gray {
text-transform: none;
color: #aaa;
}
.chapter:after {
content: "";
z-index: 0;
position: absolute;
right: 30px;
bottom: 0;
width: 400px;
height: 400px;
background-color: #0a95ff;
transform: translateX(-100%) translateY(-100%);
border-radius: 50%;
box-shadow: 0 0 0 0 #0a95ff;
transition: transform 0.4s ease-out, box-shadow 0.4s ease-in, background-color 0.2s ease-out;
}
.chapter:hover {
text-decoration: none;
cursor: pointer;
}
.chapter:hover .chapter__title {
color: white;
}
.chapter:hover .chapter__link,
.chapter:hover a {
color: white;
}
.chapter:hover .chapter__link span:after,
.chapter:hover a span:after {
width: 100%;
background-color: white;
transition: background-color 0.4s ease-in, width 0.2s ease-in;
transition-delay: 0, 0.4s;
}
.chapter:hover:after {
right: 30px;
bottom: 0;
transform: none;
}
.chapter:active:after {
box-shadow: 0 0 0 300px #0a95ff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="wrapper row">
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 1
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 2
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
<div class="col-6 col-md-4">
<a href="javascript:void(0)" class="chapter ">
<div class="chapter__label chapter__label--gray">
9 cards
</div>
<div class="chapter__title">
Card title 3
</div>
<span class="chapter__link">
<span>Card link</span>
</span>
</a>
</div>
</div>
</div>
In pure css you can't. you can wrap the text part that overlaps in a span and then use color:white;
I use Bootstrap 4. .top block should be 100% width and full screen height. .top-title should be in the middle of screen. .btn-scroll-down shold be down of the screen.
I want my page looks like
HTML
<!-- top -->
<div class="top js-top">
<div class="container h-100">
<div class="row h-100">
<div class="col-lg-12">
<h1 class="top-title">
<span class="top-title-1">text</span>
<span class="top-title-2">title</span>
<span class="top-title-3">text</span>
</h1>
go
</div>
</div>
</div>
</div>
<!-- /top -->
CSS
.btn-redirect {
display: block;
width: 301px;
height: 57px;
margin: 0;
padding: 20px 0;
cursor: pointer;
-webkit-transition: background-color .3s linear;
-moz-transition: background-color .3s linear;
-ms-transition: background-color .3s linear;
-o-transition: background-color .3s linear;
text-align: center;
text-transform: uppercase;
color: #fff;
border-radius: 10px;
background-color: #ff780c;
background-clip: padding-box;
}
.btn-scroll-down {
position: absolute;
bottom: 2%;
left: 50%;
display: block;
width: 54px;
height: 54px;
margin-left: -27px;
content: '';
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
opacity: .5;
border: 3px solid #fff;
border-radius: 50%;
background-clip: padding-box;
}
.top
{
overflow: hidden;
height: 100%;
height: 100vh;
min-height: 100%;
min-height: 100vh;
background-image: url(../images/bg_main.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
background-color: red;
}
.top .top-title
{
padding-top: 35vh;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.top .top-title .top-title-1
{
font-family: 'RobotoRegular';
font-size: 3vh;
display: block;
}
.top .top-title .top-title-2
{
font-family: 'DaysOneRegular';
font-size: 15vh;
line-height: 1;
display: block;
margin-top: 2vh;
}
.top .top-title .top-title-3
{
font-family: 'RobotoRegular';
font-size: 3vh;
display: block;
margin-top: 2vh;
}
.top .link-go-to-match
{
margin: 2vh auto 0 auto;
}
https://jsfiddle.net/LL0xm1jg/4/
But on the small screen .btn-redirect is placed on texts
I've tried to use flex properties from Bootstrap 4 but my attempts failed. Is there any way to make it work properly?
Use the flexbox way. Add a flexbox util class for the container to fill height. This flex-fill class will be included in Bootstrap 4.1.
.flex-fill {
flex: 1 1 auto;
}
https://www.codeply.com/go/YUw4uBdG1O
<div class="top js-top vh-100 bg-danger text-white d-flex">
<div class="container flex-fill">
<div class="row h-100 align-items-center py-1">
<div class="col-lg-12 h-100 flex-fill d-flex flex-column align-items-center">
<div class="my-auto text-center">
<h1 class="top-title">
<span class="top-title-1">text</span>
<span class="top-title-2">title</span>
<span class="top-title-3">text</span>
</h1>
go
</div>
</div>
</div>
</div>
</div>
Make the col-lg-12 a flexbox column using d-flex flex-column and then group the h1 and go button together in a div. Use my-auto to vertically center that div, and the button will naturally push to the bottom.
I have a column div with many rows. Rows items are made dynamic so i don't know how many items each row will have.
When I hover over an item I want to increase the width and height of the item. The problem is that when I hover over an item of the row which has the most items it will push everything down (last row in my demo).
Is there a way to fix that without using jQuery to find the height of the largest row and add it as height on selector class? Is this possible? And if it isn't possible can I make an item either hovering over the item bellow it or making the item bellow it decrease its height so I won't have that problem?
Thanks in advance for your replies
PS: Text also increases when hovering I just forgot to add it on demo and it's not important.
HTML
<div class="section columns">
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 1
</div>
</div>
</div>
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 2
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 3
</div>
</div>
</div>
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 4
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 5
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 6
</div>
</div>
</div>
</div>
<div>
I don't want this text to move when i hover and height increases
</div>
CSS
.section.columns {
width: 1340px;
color:#fff;
}
.section {
margin-left: auto;
margin-right: auto;
width: 1340px;
padding-left: 3px;
}
.column {
display: inline-block;
width: 180px;
position: relative;
vertical-align: top;
margin-right: 10px;
font-family: 'Teko',sans-serif;
padding-bottom: 20px;
}
.column .row:hover {
width:207px;
height:40px;
z-index:1000;
}
.column .row {
width: 180px;
height: 35px;
background-color: #1d1d1d;
position: relative;
overflow: hidden;
border-bottom: 1px solid #585858;
border-right: 1px solid #585858;
cursor: pointer;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.column .row:hover .background {
background-position: center;
width: 207px;
height: 40px;
opacity: .8;
-webkit-filter: unset;
-moz-filter: unset;
-o-filter: unset;
-ms-filter: unset;
filter: unset;
}
.column .row .background {
background-image:url("http://i.imgur.com/wSofTXx.jpg");
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 207px 40px;
width: 180px;
z-index: 0;
opacity: .3;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.notransition {
-webkit-transition: none!important;
-moz-transition: none!important;
-o-transition: none!important;
-ms-transition: none!important;
transition: none!important;
}
.column .row .borders {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-left: 4px solid #2887ff;
border-bottom: 1px solid rgba(0,0,0,.5);
border-right: 1px solid rgba(0,0,0,.5);
z-index: 1;
}
.column .row .score {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
line-height: 35px;
font-size: 1.5em;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
background-color: rgba(0,0,0,.5);
text-align: center;
z-index: 5;
border-left: 1px solid #3e3e3e;
}
.column .row .text {
z-index: 2;
width: 180px;
height: 36px;
line-height: 35px;
padding-left: 18px;
position: absolute;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
word-wrap: break-word;
font-size: 1.5em;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
DEMO
Instead of changing it's height, why not change it's scale. Scale doesn't impact the natural flow of elements, and all elements will behave as if the size of the target hasn't changed.
.row {
transform-origin: 0% 50%;
}
.row:hover {
transform: scale(1.2);
}
Transform origin is used to make sure the element moves to the right when scaling instead of expanding in all directions.
I have a box with two separate css transistions that occur at the same time.
When the transitions occur the heading and paragraph text underneath the icon moves position
See JS Fiddle: http://jsfiddle.net/Lsnbpt8r/
Heres my html
<div class="row">
<div class="col-md-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-home icon"></i>
<h3 class="heading">
Construction
</h3>
<p>This is how we do it</p>
</div>
</div>
<div class="col-md-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-wrench icon"></i>
<h3 class="heading">
Interior Design
</h3>
<p>This is how we do it</p>
</div>
</div>
<div class="col-md-4 text-center transistion">
<div class="box">
<i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i>
<h3 class="heading">
Service
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
Heres my css
.icon {
font-size: 32px;
vertical-align: middle;
padding-top: 35px;
padding-right: 9px;
}
.icon:hover{
font-size: 48px;
color: #003176;
padding-top: 25px;
padding-right: 5px;
}
.circle {
width: 120px;
height: 120px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f3f3f3;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.box:hover .circle{
width: 100px;
height: 100px;
background: #f7f7f7;
}
.circle-pos{
margin-top: -60px;
}
.box:hover .circle-pos{
margin-top: -50px;
}
.box:hover .icon{
font-size: 48px;
color: #003176;
padding-top: 25px;
padding-right: 5px;
}
.box{
border: 0px 1px 2px 1px solid #f1f1f1;
border-top: 5px solid #003176;
height: 150px;
font-size: 18px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.box:hover{
background-color: #135379;
color: #b9f9ff;
}
.heading{
padding: 50px 0 12px 0;
margin: 0 0 25px 0;
height: 24px;
position: relative;
text-transform: uppercase;
letter-spacing: -0.03em;
}
.transistion{
padding-top: 60px;
}
I have set a fixed height to the box but this does not stop the text from moving, any help or advice would be appreciated.
Wrap your icon in a container:
<div class="icon-container">
<i class="circle-pos circle glyphicon glyphicon-home icon"></i>
</div>
And give it a fixed height:
.icon-container {
height: 50px; // Or whatever you want
}
Works smooth for me (I only applied it to the first icon): http://jsfiddle.net/63Lbwonf/2/
You can play withe the numbers. I just threw 50px on there and it fixed the container height so the H1 doesn't move during animation.
Add an additional div for the h3 and the text below, in this case I have named it .bottombox. Then I gave it a position:absolute property so I can take it out of the flow of the remaining elements, meaning it won't be affected by the changes in size, padding and margin of your animation.
Thus, your HTML goes like this:
<div class="row">
<div class="col-md-4 text-center transistion">
<div class="box"> <i class="circle-pos circle glyphicon glyphicon-home icon"></i>
<div class="bottombox">
<h3 class="heading">
Construction
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
<div class="col-md-4 text-center transistion">
<div class="box"> <i class="circle-pos circle glyphicon glyphicon-wrench icon"></i>
<div class="bottombox">
<h3 class="heading">
Interior Design
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
<div class="col-md-4 text-center transistion">
<div class="box"> <i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i>
<div class="bottombox">
<h3 class="heading">
Service
</h3>
<p>This is how we do it</p>
</div>
</div>
</div>
</div>
and then this is your CSS:
.icon {
font-size: 32px;
vertical-align: middle;
padding-top: 35px;
padding-right: 9px;
}
.icon:hover {
font-size: 48px;
color: #003176;
padding-top: 25px;
padding-right: 5px;
}
.circle {
width: 120px;
height: 120px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f3f3f3;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.circle:hover {
width: 100px;
height: 100px;
background: #f7f7f7;
}
.circle-pos {
margin-top: -60px;
}
.circle-pos:hover {
margin-top: -50px;
}
.box {
border: 0px 1px 2px 1px solid #f1f1f1;
border-top: 5px solid #003176;
height: 200px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
position:relative;
}
.box:hover {
background-color: #135379;
}
.heading {
padding: 60px 0 12px 0;
margin: 0 0 13px 0;
height: 24px;
text-transform: uppercase;
letter-spacing: -0.03em;
}
.bottombox {
bottom:20px;
left:0;
width:100%;
text-align:center;
position: absolute;
}
.transistion {
padding-top: 60px;
}
of course you can make some changes if needed, but this is more or less the gist of it
see fiddle
The problem is your text is positioned relative to the circle, and the circle is getting smaller in the transition. You could add something like this margin-bottom: 10px; to your .circle:hover{}, but that will make the text wobble during the transition, so i'd recommend to make the text positioned absolute.
I downloaded a template for my company. I managed to get most things done, but I want to make a drop down menu and I just can't handle it. I tried this explanation How to add drop down menu using CSS? because I don't know JavaScript or jQuery, but it doesn't seem to work on this particular template. Am I describing the wrong class in css?
HTML
</nav>
</section>
<header class="sixteen columns alpha omega">
<nav class="main-nav sixteen columns">
<ul class="ten columns alpha">
<li>Start</li>
<li>O Kancelarii</li>
<li>Zakres Usług</li>
<ul>
<li>Something You do</li>
<li>TODO</li>
</ul>
<li>Press Room</li>
<li>Kontakt</li>
</ul>
<div class="social six columns omega">
</div> <!--Close Social Div-->
</nav>
CSS
.main-nav {
margin-top: 10px;
padding-top: 3px;
padding-bottom: 3px;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}
.main-nav li {
display: inline;
margin-right: 15px;
}
.social a:link {
float: right;
background-image: url(../img/facebook.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
margin-left: 2px;
}
.social a:last-child {
float: right;
background-image: url(../img/twitter.png);
width: 30px;
height: 30px;
background-position: 0 -30px;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
}
.social a:hover {
background-position: 0 0;
}
.main-nav li {
position: relative;
}
.main-nav ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display: none; /* hide it */
}
.main-nav li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Here is the whole css http://jsfiddle.net/9LcfX/18/
I've tried to rename the description in css from main_nav to alpha etc. but nothing.
Please help me, in advance thanks for Your time.
some structure problem in ur html code just replace html code with below code
<nav class="main-nav sixteen columns">
<ul class="ten columns alpha">
<li>Start</li>
<li>O Kancelarii</li>
<li>Zakres Usług
<ul>
<li>Something You do </li>
<li>TODO </li>
</ul>
</li>
<li>Press Room</li>
<li>Kontakt</li>
</ul>
<div class="social six columns omega"> </div>
</nav>