Hi I am trying to add a fade effect onto some images on a website I am making, I also want text to appear on the image when you hover over it. I have been googling and found tutorials saying you should use a class=overlay and class=text within a container and then reference to that in the css. I did this but it messed my whole format up and all my pictures moved. Should I add the overlay class into a separate div, if not how do I integrate it into my pre-existing code. Thanks!
<div id="image-wrap">
<div class="image-column" id="col-1">
<div class="image-container"><img src="images/piertopier.jpg.JPG"></div>
<div class="image-container"><img src="images/lookingback.jpg.JPG"></div>
<div class="image-container"><img src="images/heartshapedflocks.jpg.JPG></div>
</div>
<div class="image-column" id="col-2">
<div class="image-container"><img src="images/twilight.jpg.JPG"></div>
<div class="image-container"><img src="images/kindofblue.jpg.JPG"></div>
<div class="image-container"><img src="images/palace.jpg.JPG"></div>
</div>
<div class="image-column" id="col-3">
<div class="image-container"><img src="images/springtide.jpg.JPG"></div>
<div class="image-container"><img src="images/medina.jpg.JPG"></div>
<div class="image-container"><img src="images/stipple.jpg.JPG"></div>
</div>
</div>
In your style sheet section add below style, to produce a hover fade effect
img:hover{opacity:0.5;transition:1ms;}
Change the values of opacity and transition as suited for you
Related
I want to show the image in right side of the top using bootstrap4, but don't know how to resize the image height to meet the same height (keep ratio) as left part
code (want to remove 200px)
<div class="container">
<div class="row">
<div class="col-sm">
<div class="alert alert-success">
why cannot I still use table for this kind of tasks? why cannot I still use table for this kind of tasks?
</div>
<div class="alert alert-info">
It is end of 2021
</div>
<div class="alert alert-info">
Now I'd updated to div, this contents can have more text
</div>
</div>
<div class="col-sm">
<img width="200px" src="https://www.codeply.com/images/partner_creativetim.png" />
</div>
</div>
</div>
see https://www.codeply.com/p/flP5E5EpWk
I approached it a different way although this may require you to edit the height and width of your image a little.
First I removed the image from that Div and added a class bg-smile
<div class="col-sm bg-smile">
<!-- stays empty -->
</div>
I've also added mb-0 to remove the bottom margin from the 3rd text box so the image exactly lines up at the bottom.
Then added a few CSS instructions for the new class and to make the smile image a background of the Div and center it.
.bg-smile{
background: url(https://www.codeply.com/images/partner_creativetim.png) 50% 50% no-repeat;
}
Hi i have the following html
<div>
<div class='brother1'>
HELLO
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='item'>Seven</div>
</div>
<div class='brother2 button'>
BUTTON
</div>
</div>
I want to set button to be invisible if the amount of items(One,Two,Three...) is bigger that 3.
But if the amount is less then 3 i want the button to be visible.
Is this possible using css only?
If this is not possible how would you change the html structure to achieve the same behavior?
Thanks.
I'm using Bootstrap and I want to change first column the distance from left. This is illustrated in this picture:
My code:
<div class="container">
<div class="row">
<div class="col-sm-1">
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
</div>
<div class="col-sm-8">.col-sm-7</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</div>
I try with margin-left, padding-left, but I don't found where it's need change.
Change
<div class="container">
to
<div class="container-fluid">
Fiddle here: https://jsfiddle.net/DTcHh/23360/
The .container class adds a max width to that element, and centers it on the page. If you want col-sm-1 all the way to the left, you'll want to remove/adjust how you're using the .container class.
On top of that, .row and .col-sm-* come with some additional margin/paddings. Try using chrome inspector to look at your elements on the page and see how/why they are laid out the way they are.
Im new into html,css and im trying to do a menu for a mobile App which consist in some images next to each other aligned vertically, I want to overlay some text to this images.
For example, imagine a main menu of an Sports info related App, it contains 5 background images, football image, basketball image, golf image...an each image has the text at the bottom of them.
To approach this, I made the following html code:
<body onload="onBodyLoad()">
<div id="cabecera">
<h1></h1>
</div>
<div id="menu-opciones">
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Sobre txorierri y Erandio</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Lugares de interes</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Dónde comer</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Dónde dormir</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/fronton.jpg" alt="">
<h2><span>Tiempo libre</span></h2>
</div>
</div>
</body>
This way im getting the image,then the text,then another image,then another text... so by css I repositioned the text to overlay each image. The problem is that now I get and empty space where the text before was, and I want the images to be next to each other. What is the best way to get rid of that empty space? notice that since this is for a mobile App I want to avoid working with pixels on css, and try to do all % related.
Not 100% sure what you are trying to achieve but I think you can clean up your html and achieve what your looking for. You could wrap each list item in an the and get the same effect. For Example:
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<h2><span>Sobre txorierri y Erandio</span></h2>
</div>
change to:
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt=""><span>Sobre txorierri y Erandio</span>
</div>
Then you set the to position:relative and the to position:absolute to take it out of the flow of the document. This will also eliminate that white space and you can position it or hide it in relation to your image using left:-9999; and opacity:0;
Hope that helps you somewhat.
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.