Ok then. I've a skewed button, with a div inside that is de-skewed to make images and text inside not looking like the leaning tower. Now I need inside that button to have a picture in the first 25% of the button, a text in the middle 50% and another image in the last 25%. I've tried with different divs but i had an issue depending on the fact that i have defined something like this:
.button-wrapper div {
background: transparent;
border: 0;
cursor: pointer;
padding: 4px 0;
margin: 0;
width: 100%;
font-family:Impact;
font-size:26px;
font-weight:normal;
text-align: center;
color:#ffffff;
text-shadow:1px 1px 0px #000000;
-webkit-transform: skewX(-35deg);
-moz-transform: skewX(-35deg);
-o-transform: skewX(-35deg);
transform: skewX(-35deg);
}
where button-wrapper is the button that i've skewed. The issue is that if I use other divs the unskewing continues and i have the elements inside the button hang on the other side. Any idea to how i can get what i want. Here's what I've tried for html:
<div class="button-wrapper" href="sport.php">
<div id="inner_text">
<img src="images/icon.gif" width="40px" height="40px">
<span width="200px"> sometext </span>
<img src="images/light.gif" width="40px" height="40px">
</div>
</div>
UPDATE: here's the image
Chances are you have to specify no skewX values on the inner items to avoid them inheriting the CSS from the container.
Related
It's mostly in the title. I am displaying products in divs on my website. On hover, I make them increase in size by applying a margin of -15px to give them a nice hover effect. When I hover over any of them, it is fine except for the right-most ones, as it pushes the products below it away into the Bootstrap row below. Here are images:
Good (hover over a middle one):
Bad (hover over the right-most one):
Here is the code:
Search results page:
<div id="search-results">
<div data-bind="template: { name: 'product-template', foreach: allProducts }"></div>
</div>
Product template:
<script type="text/html" id="product-template">
<div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;">
<div class="product-item">
<div data-bind="style: { backgroundImage: 'url(\'../../the_vegan_repository/product_images/' + product.imagePath + '\')' }"
style= "height: 160px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
background: center no-repeat;
background-size:cover;
vertical-align:bottom;">
</div>
<div style="height: 110px; padding: 10px; background: #fc4747;">
<h6 class="medium-text" data-bind="text: product.brand" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;"></h6>
<h6 class="medium-text" data-bind="text: product.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
</div>
</div>
</div>
</script>
CSS:
div.product-item:hover {
margin: -15px;
}
div.product-item {
border: 5px solid #fc4747;
border-radius: 15px;
height: 240px;
overflow: hidden;
cursor: pointer;
}
How do I stop the Bootstrap grid system from pushing the bottom row into the row lower?
on hover, I make them increase in size by applying a margin of -15px
Use transform: scale(x); instead of margin: -15px; as transforms do not affect the box-model of the element.
CSS Transforms Module Level 1:
Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].
If you want to move it up by a certain amount, use transform: translateY(-15px) instead of changing the margin on the div.product-item:hover class. To move it in a context that does not interrupt the rest of the document. Or you can use transform: scale(1.2) to make things bigger.
The problem is that it's actually changing the dimentions of the div when you change the margin which in turn affects others. Check out this link . It gives an example on how to give such zoom effect.
Creating a Zoom Effect on an image on hover using CSS?
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
I have two images with text over them.
When I go to one image, the text of that image should disappear.
The code I wrote is ok and works almost fine.
<div class="sidebarimagesupermsg"><img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
<div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
<div>
Css:
.sidebarimage, .sidebarimagesupermsg {
position: relative;
width: 100%; /* for IE 6 */
}
.h3sidebarimage, .h3sidebarimagesupermsg {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.h3sidebarimage span, .h3sidebarimagesupermsg span {
color: white;
font: bold 22px/45px Helvetica, Sans-Serif;
letter-spacing: 2px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
.h3sidebarimage span.spacer, .h3sidebarimagesupermsg span.spacer {
padding:0 5px;
}
.sidebarimage:hover .h3sidebarimage, .sidebarimagesupermsg:hover .h3sidebarimagesupermsg {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
Please see the demo here:
http://jsfiddle.net/pikk/7dmzd7yc/
However it works fine for the 1 image. But if I go hover the 2 image, disappears also the text from the 1 image. And that's wrong.
Since I will have a lot of similar images in a sidebar, I don't want to duplicate the CSS code for each image. So I would like to know if there is a solution that permits me to keep only one copy of the css code.
I would like to keep the less CSS code as possible.
Thanks
The problem is that you are not closing your wrapping <div> tags. This should work:
<div class="sidebarimagesupermsg">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
</div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
</div>
Here is an updated jsFiddle.
In addition to #JCOC611's answer above (about closing your <div> tags), you can also greatly simplify your CSS by using element tags instead of custom classes for each item.
In your question you mention:
I don't want to duplicate the CSS code for each image.
As it currently stands, your markup would need to add a selector for each image/h3 you add. If you generalize the selectors you can add a (theoretically) infinite amount without touching the CSS.
See this updated JS Fiddle for the simpler CSS.
I am using Joomla, Phoca Gallery Image Component and Phoca Callery module. It is not actaully the question about Joomla, but about CSS. Plugin creates gallery with 4 images. Those images should create 2 x 2 grid, using float:left.
Here is what I have as a result:
http://jsfiddle.net/qAx7c/ (original link: http://renathy.woano.lv/index.php/lv/par-mums-2)
.block {
border:1px solid #342e2b;
border-radius:7px;
padding: 12px 22px 12px 22px;
}
.block-box2 div.content-main {
width:50%;
display:inline-block;
float:left;
}
.block-box2 div.content-sidebar2 {
width:49.99%;
float:right;
}
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
/* FIXes */
#phocagallery-module-ri .phocagallery-box-file {
padding: 0 !important;
background: none !important;
}
#phocagallery-module-ri .phocagallery-box-file-first {
background: none !important;
}
#phocagallery-module-ri {
margin-left: 40px !important;
}
#phocagallery-module-ri div.mosaic a img {
border: 1px solid #342e2b !important;
/*border: none !important;*/
}
#phocagallery-module-ri div.mosaic a img, #phocagallery-module-ri div.mosaic img {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
<div class="block block-box2 clearfix">
<div class="content-main">
<div class="item-page">
<h2>Par mums</h2>
Some text here
Some text here
</div>
</div>
<div class="content-sidebar2">
<div id="phocagallery-module-ri" style="text-align:center;">
<center style="padding:0px;margin:0px;">
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Atmosfēra" href="">
<img src="phoca_thumb_m_parmums_telpas.jpg" alt="Atmosfēra" width="170" height="150">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums" href="#">
<img src="phoca_thumb_m_parmums_atmosfera.jpg" alt="Par mums" width="170" height="149">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums" href="#">
<img src="phoca_thumb_m_parmums_dzerieni.jpg" alt="Par mums" width="170" height="150">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums ārpusē" href="#">
<img src="phoca_thumb_m_parmums_izskats.jpg" alt="Par mums ārpusē" width="170" height="150">
</a>
</div>
</center>
</div>
<div style="clear:both"></div>
</div>
As you see, one image is not floating correctly. The code of div phocagallery-module-ri is generated automatically.
I tried to change width, marings, paddings of images and divs, but nothing helps - one image is floating incorrectly, however it seems that everything should be fine.
Can you, please, give me some ideas, why this floating is broken?
The first image's code is :
<img src="/images/phocagallery/par_mums/thumbs/phoca_thumb_m_parmums_telpas.jpg" alt="Atmosfēra" width="170" height="150">
And the second image's code is :
<img src="/images/phocagallery/par_mums/thumbs/phoca_thumb_m_parmums_atmosfera.jpg" alt="Par mums" width="170" height="149">
They have different height ( 150 and 149 ), this is the reason.
Changing the second image's height to 150 will works fine.
The issue is that the second image is less tall than the first. Therefore, the second floats next to the first, but the third one also floats left to the first, leaving a gap. The fourth one doesn't fit next to the third, so it wraps to a new line.
So that's the cause. Now for the solution, I'm not a CSS professional, so I cannot say which of the following solutions is best, nor if there is another, better one.
One solution would be to embed each image in a container that has a fixed height, or at least has the same height for each of them.
Other possible solutions would be to use a CSS table way of styling.
Thirdly, adding a clear:both element after each second image (since you only want two on a row) will break the floating.
Given the nature of the site and the pictures in the gallery, you may also choose to make each thumbnail image the same size. That will also solve it, by taking away the trigger of the problem.
I'm trying to write text over an image with the CSS and HTML below but it's not working..
CSS
.social_media_head{
background: url(newsletter_image.gif) no-repeat center;
position: relative;
right: -9px;
height: 0;
width: 325px;
padding: 30px 0 0 5px;
}
.media_name h2{
position: relative;
top: 2px;
}
.media_name {
position: relative;
top: 2px;
}
HTML
<div class="social_media_head">
<h2 class="media_name">Social Media</h2>
</div>
Example jsfiddle
Update
I'm very sorry if the image I'm referring to is wrong. The image I want to put text on is the image on top of the social media icons (facebook, twitter, youtube)...i.e. Image inside class = "social_media_head".
Once again I'm sorry for the confussion.
you can do this by setting z-index of text higher than image and position absolute
.text{
z-index:101;
position:absolute;
/set the position of text you want
}
.image{
z-index:100;
}
and to text above image
.media_name h2 should be h2.media_name
h2.media_name {
color: red;
margin-top: -30px;
top: 2px;
}
full screen Result and fiddle
Try the following to avoid H-tags, and for the box to adjust for height the image is inline rather than as background: (see code here http://jsfiddle.net/jySZB/1/)
(due to update, the old code is removed and kept in the link above - see new link and code below) -
UPDATE: if "over an image" means above rather than on top (which do make more sense in this case), try this code instead:
http://jsfiddle.net/jySZB/2/
HTML:
<div class="social_media_head">
<div>Social Media</div>
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
</d
CSS:
.social_media_head {
display:block;
}
.social_media_head div {
color:red;
font-size:26px;
font-weight:bold;
font-family:sans-serif;
clear:both;
}
Result:
Tip: as the images are inline here they are easy to convert to click-able links to go the the social sites (I used only one image for example).
Works for me (simplified): http://jsbin.com/uqazel/1/
Maybe you need to set an appropriate height.