is it possible to hover an image and visible other css element such as menu links:
<div class="carousel">
<div class="row" style="margin-top:60px;">
<div class="col-md-6 col-sm-6 col-xs-7 text-left" > <div class="logo"></div> </div>
<div class="col-md-5 col-sm-5 col-xs-4 text-right" id="mymenu" style="padding-right:80px;">
HOME <span class="d">|</span>
ABOUT <span class="d">|</span>
CONTACT
</div>
<div class="col-md-1" id="myimg">
<img src="images/menu.JPG"> </div>
</div>
...]
Once I hover image (menu.jpg) I want to visible menu links (home contact etc.) gradually to the left like a drawer. I use bootsrap.
My CSS code is:
#mymenu a.m, .d {
font-size:22px;
font-weight:bold;
color:#000;
display:none;
}
.carousel #myimg img:hover > .carousel #mymenu a.m{
display:block;
}
Any ideas ?
Thanks in advance.
Related
im so clueless in css,I have a loader,when i click the function it just starts below the image ina div which is so ugly,i want it to come over, it any idea?
<div class="card" (click)="SendToBank($event)">
<div class="k-block" *ngIf="loadingSpinner">
<div class="spinner-border text-info" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card-body">
<img class="bank-logo" src="../assets/Img/2.png" id="seb">
<span> SEB</span>
</div>
</div>
any idea how i can achieve that?
Well you just need to position it fixed and style it a little bit.
Read more here css position
I left out the Angular related code.
.k-block {
position:fixed;
display:flex;
width: 100%;
height: 100%;
left:0;
top:0;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.5)
}
<div class="card">
<div class="k-block">
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card-body">
<img class="bank-logo" src="../assets/Img/2.png" id="seb">
<span> SEB</span>
</div>
</div>
I have a element which is in ng-repeat
<div class="panel panel-default" ng-repeat="candidateInfo in aCandidateDetails">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<a style="cursor:pointer">
{{candidateInfo.name}}</a>
</div>
</div>
<div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" class="panel-height" ></div>
</div>
I need to increase the height of 1st panel div ;i gave a class="panel-height"
the sass code which i gave is
div .panel-height {
&:first-child {
height: 500px;
}
}
but its not working,no idea where im going wrong
Any help will be appreciated
I'm trying to achieve a three-column layout with Bootstrap 3. I want the page to appear like on left part of the image while on a desktop and like on the image to the right when on mobile.
<aside class="left col-md-2"></aside>
<div class="left col-md-7"></div>
<aside class="left col-md-3"></aside>
Any help?
You can keep the div as your first container followed by the asides and then use col-lg-push-* and col-lg-pull-* to switch on larger device. Source here
Demo [Click on Full Page of the snippet to test for larger device]
div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<div class="container">
<div class="content left col-md-7 col-lg-push-2"></div>
<aside class="side1 left col-md-2 col-lg-pull-7"></aside>
<aside class="side2 left col-md-3"></aside>
</div>
Try this
<div class="col-xs-12 visible-xs">Middle Column</div>
<div class="col-lg-2 col-xs-12">Left column</div>
<div class="col-lg-8 hidden-xs">Middle column</div>
<div class="col-lg-2 col-xs-12">Right column</div>
Hope it helps.
HTML
<div class="row">
<div id="col1" class="col-md-4">col-md-1</div>
<div id="col2" class="col-md-4">col-md-2</div>
<div id="col3" class="col-md-4">col-md-3</div>
</div>
CSS
#col1 {background-color: blue;}
#col2 {background-color: purple;}
#col3 {background-color: green;}
#col1 {display:table-footer-group;}
#col2 {display:table-header-group;}
#col3 {display:table;}
Fiddle
I would like to join together two rows that have different colors inside a container-fluid and use rounded-corners for the whole container. I have tried to change the value of the border-radius parameter to 10px but this does not work. Is there a way to update the container-fluid class to have rounded corners?
<div class="container-fluid" style="border-radius: 10px">
<div class="row bg-warning h4">
...
</div>
<div class="row bg-info">
...
</div>
</div>
Try this:
Remove the h4 class for joining the container
CSS:
.top {
border-top-left-radius:50px;
border-top-right-radius:50px;
}
.bottom {
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
}
.bg-warning{
background-color:red;
}
.bg-info{
background-color:yellow;
}
HTML:
<div style="height:100px" class="row top bg-warning">
</div>
<div style="height:100px" class="row bottom bg-info">
...
</div>
DEMO
I would like the button to also be inside the div with 'border-blue', but it doesn't. If I remove 'pull-right' from the button's class, it will be in. So, how to keep the button inside the div, and also float it to the right.
http://www.bootply.com/KRnvb6Kk4W
HTML :
<form id="LoginForm">
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center col-lg-3 border-blue">
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div>
<span id="spMsg"></span>
<button type="submit" class="btn-login-base pull-right">
<i class="fa fa-share-square"></i>
</button>
</div>
</div>
</div>
</div>
</form>
CSS :
.border-blue {border:1px solid blue;}
.row-fluid
{
height: 100%;
display:table-cell;
vertical-align: middle;
}
.centering
{
float:none;
margin:0 auto;
padding:0;
}
.btn-login-base
{
width:32px;
height:34px;
padding:0;
background:transparent;
border:none;
}
//bootstrap's .pull-right{float:right !important;}
Add .clearfix class to .border-blue, like this:
<div class="centering text-center col-lg-3 border-blue clearfix">
It will force the container not to collapce because of the inner floated elements.