I'm using ouwl carousel for the home page carousel.
here you have the example
The problem is the white border created on the bottom and the right parts.
I've read that applying: display:block; line-height:0;
but nothing worked
here you have a fiddle (it works fine sometimes, no border (i don't know why)) with only the carousel, for testing if you want.
Move the window size of the result for better experience with the carousel images.
I'm aplying the shadow to the div converted to carousel:
#carousel{
position: relative;
width: 100%;
box-sizing:border-box;
background-size: 100%;
height: auto;
display: block;
text-align: center;
margin-top: 5px;
line-height: 0;
-webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
-moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
box-shadow: 4px 4px 2px 0px rgba(0,0,0,.4);
}
You can try to give the .owl-wrapper-outer the box-shadow (only works if your images are the same size).
If your images are smaller, then give the images a box-shadow and .owl-item a padding, if the box-shadow is cut off.
Related
I am making a zoomable div, when a user hovers over one of the divs then that specific div zooms, this currently works...
My issue is mainly with Safari when using CSS zoom, all of the contents within the div jump, at first it scales nicely and then the contents jump down to their original size, this issue does not occur in either Firefox and Chrome.
Here is my css of the main zoomable div :
MAIN DIV
width:740px;
height:150px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
margin: 0 auto;
left:0;
right:0;
position: relative;
margin-bottom:10px;
transition:100ms;
font-family: Rubik;
MAIN DIV HOVER
border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
zoom:102%;
-ms-zoom: 1.02;
-webkit-zoom: 1.02;
-moz-transform: scale(1.02,1.02);
transition: 250ms;
I have made a JS fiddle to show the issue, the contents are messed up and this would normally be PHP generated, you can see the issue though when you hover over the wrapper using safari, with firefox the hover zoom effect is perfect and with chrome the content zooms however there is no transition. Thanks for any help
https://jsfiddle.net/04t5psbu/
Please understand, this is not an issue with making the div zoom... that works, my problem is with the content within the div, as you hover over the div all content within the div zooms together, this works perfectly in firefox, please check the fiddle using safari
Use transform instead of zoom. Remove extraneous curly braces { / } from HTML.
#coupon:hover {
border:1px solid #aaa;
-webkit-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
box-shadow: 3px 4px 8px -4px rgba(0,0,0,0.75);
transition:100ms;
cursor:pointer;
-webkit-transform: scale(1.02,1.02);
-moz-transform: scale(1.02,1.02);
transition: 250ms;
}
You have simply forgot to add -webkit-transform: scale(1.02,1.02);, which is the web browser engine to use for Safari.
Here is the working fiddle.
I am trying to put a JS chart inside a <div> but the issue is that when I put it inside the div tag, nothing shows!
I have tried with different libraries (C3, AmCharts, HighCharts) and all of them the same issue, nothing appears when calling the div of the charts inside another div:
<div id="chartdiv"></div>
The below one, does not work :
<div class="block"><div id="chartdiv"></div></div>
However, when placing it outside of the div tag, it works. I've tried to debug, but no errors shows on the console!
CSS of block class:
.block {
display: block;
width: 98%;
margin-right: auto;
margin-left: auto;
padding-top: 6px;
padding-bottom: 0px;
border: 1px solid #e2e2e2;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 0 0 hsla(0, 0%, 91%, .75);
}
There are 5 graphs on the page, and I believe that a conflict of a JavaScript happens which is causing the issue.
Any ideas about what's happening? I am not sure if there is an issue with the library itself; however, if you have charting libraries and that have the ability to show real-time data, please share it.
Try adding some explicit CSS rules - your HTML may be inheriting something unexpected:
.block {
width: 98%;
margin-right: auto;
margin-left: auto;
padding-top: 6px;
padding-bottom: 0px;
border: 1px solid #e2e2e2;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 0 0 hsla(0, 0%, 91%, .75);
/* Sure you don't want inline-block here? */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 7 years ago.
right now I want to implement a border on hover on a button.
That button is in a div together with 3 other buttons. However, as soon as I hover over it, the border is being displayed, but at the same time the button expands the size of the added border as well, which is not what I have in my mind.
I made a fiddle to demonstrate the problem: Click me
I read up about this topic here, and I indeed found a solution, by adding margin-top: 3px;
to the hover classes, however, that "squeezes" the button, which is not what I want.
Instead, I want the button to not look compressed or anything, but rather simply with a 4px border overlaying the top 4 px of the button.
Any advice?
Thanks in advance
You could try using a box shadow instead, as this doesn't actually affect the positioning:
a {
transition: all 0.8s;
margin: 5px;
text-decoration: none;
display: inline-block;
background: lightgray;
height: 50px;
width: 150px;
line-height:50px;
text-align: center;
color:black;
}
a:hover {
box-shadow: 0 -3px red;
}
HOVER MENOTICEHOWIDON'TMOVE?
I created a quick example: http://jsfiddle.net/alexcoady/ogoy21dq/
And one with just top or bottom http://jsfiddle.net/alexcoady/ogoy21dq/2/
Use margin to replace border-width when it's not visible.
button {
margin: 3px;
border: 1px solid red;
}
button:hover {
margin: 0px;
border: 4px solid red;
}
You can:
use the box-shadow fiddle demo
.functionButton:hover{
box-shadow: 0 -4px 0 0 #a3def1;
}
Style your button to have vertical-align to top. Add the following style to the bottom of your CSS:
#functionButtonDiv button{
vertical-align: top;
}
Updated jsFiddle
Read up: vertical-align | MDN
Try to understand what is happening.
You want buttons not be squeezed, but a border on top to be added.
Initially your button height was 25px and border was 1px.
On hover your height remains same however the border increases by 3px, hence making your button to squeeze.
Solution:
Hover: height has to be increased to accomodate increased border( 4px-1px = 3px) (in order not to squeeze the button).
If you do this only you will observe that the button starts shifting down.
To avoid it add margin of 4-1 = 3px to your functionButton class to compensate the increased height.
Similarly add a margin of -3px in hover class as the height is already increased by 3px.
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px; //added to avoid shifting of buttons down on hover (Here it compensates the increased height while hovering)
}
.functionButton:hover{
border-top: 4px solid #A3DEF1;
height:28px; //increased height to accomodate the increased border
margin-top:-3px; //negative margin to avoid shifting of button down
}
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px;
}
.functionButton:hover{
width:60px;
height:28px;
border-top: 4px solid #A3DEF1;
margin-top:-3px;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>
You probably don't need Javascript for this.
You can use box-sizing to make sure that borders are included in your dimensions and vertical alignment to maintain position.
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.functionButtonChat {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
outline: none;
background: #F2F5FD;
}
.functionButtonChat:hover {
border-left: 4px solid #A3DEF1;
border-top: 4px solid #A3DEF1;
}
.functionButton {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
border-left: none;
outline: none;
background: #F2F5FD;
}
.functionButton:hover {
border-top: 4px solid #A3DEF1;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButtonChat">Dummy1</button>
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>
use following css i have made some changes in ur css and its working as per ur requirement try the following
.functionButtonChat{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButtonChat:hover{
border: 4px solid #A3DEF1;
}
.functionButton{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButton:hover{
border: 4px solid #A3DEF1;
}
Similar to a previous question but I gave up on that an decided to come back to it later, now things are different as I'm using jQuery. I'm having a dropzone on my site and for image files I would like there to be a border shadow, but for files I don't want one. Multiple files can be dropped and the previews display inline, so say if 2 images and one file were dropped, I would want the shadow on both the images, but not the file preview box. I made 2 CSS classes, identical except for the shadow:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
.dz-preview-noshadow {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
Simplest way to go seemed to be with jQuery and I was using it in the project anyway, so I made this (.dz preview is the default class):
mydropzone.on("addedfile", function(file) {
if (!file.type.match(/image.*/)) {
$('.dz-preview').addClass('dz-preview-noshadow').removeClass('dz-preview');
mydropzone.emit("thumbnail", file, "http://i.local.dev:5000/jLNutaV.png")
}
});
It works initially-but goes wrong. I drop 2 images and they get their shadowed border just fine, but when I drop a file, it loses its shadow, which is what I wanted - but so do the two images that were dropped before it. If I drop another image it will get its shadow again, but the previous elements don't change. I know I'm missing something really stupid here about the scope of how JS is affecting these classes, but is there a way to change the class for JUST that instance, without muddling up everything before it, or do I need to run more checks and manually add the class back on?
Can't post codes in comments, so I'll make it an answer.
Since .dz-preview and .dz-preview-noshadow shares a lot of same codes, you can have a class that just holds the shadow. For eg:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
.shadow {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
So instead of adding and remove, you can just do a remove.
For the life of me, I can't figure out how to prevent the dropdown menu, seen below, from riding behind the other buttons. I've changed the z-indexes of all the pertinent elements, but nothing seems to work.
I've setup a jsfiddle to demonstrate: http://jsfiddle.net/theoryshaw/44HPM/3/
(4 jsFiddle alerts will popup... please close them)
Any clues would be greatly appreciated.
Change the .dropdown-menu class in the css to:
.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 1px 0 0;
min-width: 160px;
padding: 4px 0;
position: relative;
top: 100%;
z-index: 1000000;
}
This fixes the z-index issue, however you are then stuck with buttons going haywire, but may be this helps you to get closer to the problem :)