I have images in a slideshow on this page. I would like the square images to become circluar using css.
I am having a hard time using inspect element b/c the images are in a slideshow. Which class can I use to add border-radius to make the square image eg of the pasta salad/potatoes into a circle shape?
<div id="rev_slider_22_3_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:400px;">
<div id="rev_slider_22_3" class="rev_slider fullwidthabanner" style="display:none;max-height:400px;height:400px;">
<ul> <!-- SLIDE -->
<li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" >
<!-- MAIN IMAGE -->
<img src="http://xxx.image.jpg" alt="challah-1" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
<li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" >
<!-- MAIN IMAGE -->
<img src="http://xxx/meatballs.jpg" alt="matza-balls" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
Use this:
.tp-simpleresponsive >ul li {
border-radius: 50%;
}
.rev_slider_wrapper {
background-color: transparent !important;
}
You can apply border radius 50% to your square image to make it circular.
.circular-image {
border-radius: 50%;
}
While the best way to accomplish this is to use:
.circular-image {
border-radius: 50%;
}
You need to be aware that in most cases, you need to apply a min-width, and min-height or else your result may not be as expected in some brosers/uses.
Related
I am trying to style a series of divs, depending on their position. I want them to be styled, like so:
<div class="col33"></div> <!-- red -->
<div class="col33"></div>
<div class="col33"></div> <!-- orange -->
<div class="col33"></div> <!-- red -->
<div class="col33"></div>
<div class="col33"></div> <!-- orange -->
<div class="col33"></div> <!-- red -->
<div class="col33"></div>
<div class="col33"></div> <!-- orange -->
But I can only seem to get every third child:
.col33:nth-child(3n) {
background-color: orange;
}
http://jsfiddle.net/UAj6h/3/
Just add another rule for 3n+1 div
.col33:nth-child(3n) {
background-color: orange;
}
.col33:nth-child(3n+1) {
background-color: red;
}
Example fiddle: http://jsfiddle.net/UAj6h/4/
As a side note, you may avoid to use redundant .col33 class, in order to reduce markup size
and you may target those div with .parent-div > div
Just add .col33:nth-child(3n-2) or .col33:nth-child(3n+1) for your red divs.
.col33:nth-child(3n-2) {
background: #ff4136;
}
DEMO
I have a section in my rails web application's view page which is nothing but a code that's displaying the facebook like, twitter tweet and other sharing options. The code goes like this:-
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50effbad1fc26ade"></script>
<!-- AddThis Button END -->
I wanted to move this div to center. So my css code for this is like:
.center {
text-align: center;
}
And I then added the <div class="center"> to my code...
But it's node moving everything center. What could be the reason??
Thanks in advance...
try puting a value to the width of your .center! For your convenience you can use a background color to keep your eyes on different div s what difference it makes.
.center {
text-align: center;
width: 70%
/*For the sake of understanding divs sometimes background color helps*/
background-color:#b0e0e6;
}
Here is the link: http://unlockinglg.com/beta/index.html
Basically I want my thumbnails to align with the rest of the content above.
Right now it is skewed to the left.
See video of what I mean by unchecking .thumbnails{marging-left:20px} http://screencast.com/t/4xCmVzWxfr.
I tried over-riding it by .thumbnails{marging-left:0px} but that didn't work.
Thanks
As you can see in firebug, there is another rule that sets the margin-left property. By uncheking a rule, you don't set it to 0, you ignore it (so it looks for other applicable rules).
It may work with margin-left: inherit; and it should work with margin-left: 25px;
But this is not the real problem : .thumbnails behave like a .row so it shouldn't be directly contained in one.
To make it simple, try removing the .row wrapper.
<div class="marketing">
<div class="row">
<!-- ... -->
</div>
<hr>
<!-- no .row -->
<ul class="thumbnails steps">
<li class="span4">
<!-- ... -->
</li>
</ul>
<!-- no /.row -->
</div>
I have a hover solution setup with CSS. However, the hover images don't respect the viewport and therefore end up displaying outside of it. I planned to simply create new classes specifying the offset depending on the location of the image within my design, but since I can't control the resolution the user is using, I was thinking there should be some way to force the hover to display within the viewport. Does anyone have an idea on how I can do this?
I have the following CSS:
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 70px;
}
To match the following thumbnails with hover:
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg" />
<span><img src="1_b.jpg" /></span>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg" />
<span><img src="2_b.jpg" /></span>
</a>
</li>
I have a sample page here displaying the behavior:
http://estorkdelivery.com/example/example2.html
Hover over the images at the bottom to see the hover image display outside of the viewport.
Thanks!
Update 2/22/2012 I tested answer #1 below, but it introduced new issues such as the need to change the transparency and the need to have the hover image always display from the top left of the image - both issues I saw no way of modifying with the script options. Anyone have other suggestions or a way to modify the script in answer #1? Also, I should add what I'm looking for as more of the final result is the hover styling of images on istockphoto.com where the images always appear in the same spot to the left or right of the images they are hovering over and not based off the position of the mouse as you hover over the image.
I've created a bespoke plugin for you!
http://jsfiddle.net/adaz/tAECz/
Well, it's pretty basic but I think it meets your criteria. You can activate it in two ways:
1) If you can't be bothered creating thumbnails for every image, you can just simply list your images like this:
<ul id="istockWannabe">
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
...
</ul>
2) If you really want to create your own thumbnails, your html should look like this:
<ul id="istockWannabe">
<li>
<span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
</li>
...
</ul>
Either way you choose, you need to include jQuery 1.7+ in your page along with my plugin.
The very last thing you need to do is to activate it, if you're going for the first option, you can just include in your page following code:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe();
});
</script>
If you're going for the second option, you need to override default settings like this:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
This is more like a prototype so it's quite limited in terms of functionaltiy but you can set some options like:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
transitionSpeed: 100
If you like it, I'm happy to spend some time on it and adjust it to suit your needs!
Try the jQuery Tooltip:
Here is an example according to your request:
http://jsfiddle.net/cadence96/3X2eZ/
DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/
Quick instructions:
1) Within the <head> load the css and scripts:
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
2) Still within the <head> place the execution script:
<script type="text/javascript">
$(document).ready(function() {
$(".your-div").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});
</script>
The class '.my-div' will be used to display the image with the hover event.
The sibling div to '.my-div' must contain the hidden elements to make visible after hovering.
<ul>
<li>
<div class="my-div">
<!-- Here comes the image with the hover event -->
</div>
<div class="active-hover">
<!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
<!-- .active-hover must be set with display:none -->
</div>
</li>
</ul>
That's all!
I've developed a script, in the js you can change the width of the container.
Here is the fiddle:
http://jsfiddle.net/cadence96/GgDqh/
UPDATED, NOW WORKS IN FIDDLE AND IS MORE ADAPTABLE.
UPDATED:
demo : http://so.lucafilosofi.com/make-css-hover-stay-within-viewport
look at the source code
NB: this does not take in consideration cases in which the popup is bigger then the window, in this case you should not only change the offset position but you have to resize the popup to fit the window.
This works. I however solved the problem only for the Y-axis. For the horizontal offset it should be the same. See how it works here.
I set the top to exactly the side of the image * -1, this aligns the image at the bottom if it doesn't fit, change that value to whatever you want. The images are very big and this script is however not gonna be bulletproof. You would have to get the whole visible area to make sure it doesn't cut out on the other side when you re-position it.
The markup hasn't changed, I just added the Jquery:
$(document).ready(function(){
$(".thumbnail > img").mouseenter(function(){
var winSize = $(window).height();
var winScrollTop = $(window).scrollTop();
var linkOffset = $(this).offset().top - winScrollTop + 75;
// 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
var imgHover = $(this).next("span");
var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
var spaceDif = winSize-linkOffset;
if(spaceDif < imgHoverHeight){
imgHover.css("top", -imgHoverHeight+"px");
//it doesn't have to be -imgHoverHeight. Tweak this value to get better results
}
});
$(".thumbnail > img").mouseout(function(){
$("span").css("top", "0");
});
});
Hope it helped!!
Try this one... seems comparatively cool!
<html>
<head>
<title>Hover Test</title>
<style>
li {margin-bottom: 100px;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
.thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
</style>
</head>
<body>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg">
<div><img src="1_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg">
<div><img src="2_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.apple.com" class="img thumbnail">
<img src="3_s.jpg">
<div><img src="3_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.babycenter.com" class="img thumbnail">
<img src="4_s.jpg">
<div><img src="4_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.food.com" class="img thumbnail">
<img src="5_s.jpg">
<div><img src="5_b.jpg"></div>
</a>
</li>
</body>
I am trying the Blueprint CSS framework, and am having a hard time figuring out how to do the overall layout.
It seems Blueprint (as far as I have understood it so far) makes you use a set page width at 950px. I guess you could change that with some modification, but in any case there has to be some width, so that's fine. The problem is, even if I want the main content of the page to be 950px wide, I want 100% wide headers and footers.
So I have placed a header and a footer outside the main "container" div that's 950px wide. I set the header div to 100%. And then I have a "headerContent" div inside it (containing menu, logo, etc), which has a 950px width (span-24 in Blueprint terms). But I want the headerContent div to be centered within the header div.
I have always used the "margin: 0 auto" trick to do this, but for some reason it doesn't work at all now.
Here's the html:
<div id="header" class="blueheader">
<div id="headerContent" class="span-24">
<div id="logo" class="span-6">
<a href="/">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14"><ul id="menu"><li>
<a href='/Services/Index'>TJÄNSTER</a></li>
<li>
<a href='/About/References'>KUNDER</a></li>
<li>
<a href='/About'>OM OSS</a></li>
<li>
<a href='/About/Contact'>KONTAKT</a></li>
</ul></div>
<div id="logindisplay" class="span-2">
Logga in
</div>
</div>
</div>
And here's the css for header and headercontent:
#headerContent
{
overflow: auto;
zoom: 1;
margin: 0 auto;
}
#header
{
width: 100%;
position: relative;
margin-bottom: 0px;
color: #000;
margin-bottom: 0px;
overflow: auto;
zoom: 1;
}
The overflow and zoom part is just another trick I read about to avoid having to use empty divs to clear containing divs, and I tried without them with no luck, so they have nothing to do with the problem.
Any ideas what I'm doing wrong?
You need to set a width the the #headerContent because without it defaults to width:100% if you place a 950px width to the div, you should be fine.
Found the answer: you shouldn't use span-24 on the headerContent apparently in the Blueprint framework, but rather the container class. Here's what worked:
<div id="header" class="blueheader">
<div id="headerContent" class="container">
<div id="logo" class="span-6">
<a href="#Url.Action("Index", "Home")">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14">#Html.Raw(Html.Menu())</div>
<div id="logindisplay" class="span-2">
#Html.Partial("_LogOnPartial")
</div>
</div>
</div>
I cannot say I understand exactly why it didn't work before, and that worries me, because I am trying this framework to simplify layout, but this made it harder to understand. As far as I could see it should have worked with the first code too...