I'm trying to affect two elements, the event-thumbnail img:hover will effect also .event-date .
when I'm trying to do something like .event-date+.event-date
its effect only on the .event-date.
.event-list .event-thumbnail img{
display: block;
transition: 0.8s;
}
.event-list .event-thumbnail img:hover +.event-date {
transform: scale(1.1,1.1);
}
.event-thumbnail .event-date{
position: absolute;
left: 0;
top: 0;
background:#07A2DD;
color:#FFF;
width: 60px;
text-align: center;
padding: 10px 0;
line-height: 1;
font-weight: 600;
}
<div id="latest-events">
<h1>events</h1>
<div class="event-list clearfix">
<figure class="event-thumbnail">
<a href="http://sd.esy.es/event2/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt="2">
<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">oc</span>
</div>
</a>
</figure>
<div class="event-detail">
<h4 class="event-title">
2
</h4>
<div class="event-excerpt">
text
</div>
</div>
</div>
<div class="event-list clearfix">
<figure class="event-thumbnail">
<a href="http://sd.esy.es/event3/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt=" 3">
<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">oc</span>
</div>
</a>
</figure>
<div class="event-detail">
<h4 class="event-title">
3
</h4>
<div class="event-excerpt">
text text text text text text text text text text text text text text text text
</div>
</div>
</div>
<div class="event-list clearfix">
<figure class="event-thumbnail">
<a href="http://sd.esy.es/event1/">
<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt=" 1">
<div class="event-date">
<span class="event-date-day">10</span>
<span class="event-date-month">feb</span>
</div>
</a>
</figure>
<div class="event-detail">
<h4 class="event-title">
1
</h4>
<div class="event-excerpt">
some text </div>
</div>
</div>
</div>
Try this :
.event-thumbnail img,
.event-thumbnail img + .event-date {
transition: 0.8s;
}
.event-thumbnail img:hover,
.event-thumbnail img:hover + .event-date {
transform: scale(1.1, 1.1);
}
The same properties can be applied to multiple selectors at once by separating the selectors with a comma, as in the following:
selectorA,
selectorB,
selectorC {
property: value;
property: value;
property: value;
}
It should work fine, see my example.
div:hover + p {
background: #000;
color: #fff;
...
}
Maybe the transform: scale(1.1,1.1); doesn't work? Try to set primitive styles to make sure your selector works right. For example background: red;.
Related
I have a grid view that looks like the following:
jQuery(window).resize(function(evt) {
jQuery(".grid-content > div > div > .channelImage").height(jQuery(".grid-content > div > div > .channelImage").width());
});
jQuery(function() {
jQuery(window).resize();
});
body {
background-color: rgba(48, 48, 48, 1);
}
body>.container {
max-width: 90vw;
}
.previewrow {
height: 40vh;
}
.preview {
position: absolute;
left: 0;
right: 0;
height: 40vh;
}
.grid-content>div>div {
margin: 3vw;
box-shadow: 6px 6px 6px black;
border: 1px solid white;
text-align: center;
color: white;
}
.grid-content>div {
float: left;
}
.grid-content>div>div>.channelImage {}
.grid-content>div>div>.channelImage:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.grid-content>div:hover>div {
box-shadow: 0 0 0 black;
transition: all 0.25s;
margin: 1em;
}
<!-- Bootstrap and JavaScript -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container body-content">
<div class="grid-content">
<!-- One -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Two -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Three -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
some text
</div>
</div>
</div>
<!-- Four -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
<!-- Five -->
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
<div>
<div class="channelImage">
<img width="30%" />
</div>
<div>
Some text
</div>
</div>
</div>
</div>
</div>
</body>
As you can see I am trying to enlarge the squares whenever the user hovers over the square. But adjusting the margins results in other boxes being moved. How can I enlarge the squares so they do not move other boxes?
You can make something bigger without moving anything around it by using the following CSS and applying it to the element you want to effect:
.class {
transition: .10s, transform .10s ease;
-moz-transition: .10s, transform .10s ease;
-webkit-transition: .10s, transform .10s ease;
}
.class:hover {
-ms-transform: scale(1.01); /* IE 9 */
-webkit-transform: scale(1.01); /* Safari */
transform: scale(1.01);
}
As a bonus, you can make it shrink back down when you click it to make a spring-like effect:
.class:active {
-ms-transform: scale(0.99); /* IE 9 */
-webkit-transform: scale(0.99); /* Safari */
transform: scale(0.99);
}
I'm just thinking about this but I'm not using Bootstrap though.
Can't you just use another image/element, get the x and y co-ords of the underlying element and place on top. The element on top displays the contents of the element below but is larger in size. You could make the width of the element below wider too. So that the elements to the right move over. The elements beneath will not move.
I've just done this quickly and it works quite well. The only problem I have is getting the x, y co-ords on scrolling.
I will post the code once I have finished.
Thanks.
I want to Display Three Image in a Single Div as shown below, and on hover on particular image the image has to enlarge.
please help me.
HTML:
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="img1.jpg" alt="thumb01" class="style">
<div class="col-sm-6 col-md-6">
<img src="img2.jpg" alt="thumb01" class="ch">
</div>
<div class="col-sm-6 col-md-6">
<img src="img3.jpg" alt="thumb01" class="ch">
</div>
</div>
</div>
</div>
CSS:
.ch {
width: 100px;
position: relative;
opacity: 1;
transition: 0.3s ease;
cursor: pointer;
}
.ch:hover {
transform: scale(1.5, 1.5);
opacity: 2;
}
I have seen many different ways to resolve the following, but it does not work quite as I hoped...
I need to make a div (main div) with severel divs inside (item-divs).
Each item-div must show a different picture, but when I hover a certain picture, this picture should be hidden and a text showen instead - in the same div.
How on earth can I make this?
For example this variant:
<div class="wrap">
<div class="child1"></div>
<div class="child2"></div>
</div>
And your css chould be:
.wrap:hover > child2{
opacity: 0;
}
But static styles should be like this:
.wrap{
width: 200px;
height: 300px; /* maybe auto if you want */
position: relative;
}
.child1{
width: 100%;
height: 100%;
background: lightgreen;
}
.child2{
width: 100%;
height: 100%;
background: #ff3030; /* surely for example */
position: absolute;
top: 0;
left: 0;
}
/* and this block .child2 will be faced. When it's opacity will be 0, you get your effect */
You can do this with the CSS pseudo element :hover
See example:
http://jsbin.com/vijawuda/1/edit?html,css,output
HTML Markup:
<div class='outer-container'>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 1
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 2
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 3
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 4
</div>
</div>
<div class='image-holder'>
<img src='' />
<div class='text'>
Test image 5
</div>
</div>
</div>
CSS
.image-holder {
width: 150px;
height: 150px;
display: inline-block;
}
.image-holder > .text {
visibility: hidden;
width: 150px;
height: 150px;
}
.image-holder:hover img {
visibility: hidden;
}
.image-holder:hover .text {
visibility: visible;
}
HTML
<div class="main">
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
<div class="content">
<div class="maincontent">
<img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
</div>
<div>Hovering Content</div>
</div>
</div>
CSS
.main {
width: 1000px;
height: 200px;
}
.content {
width: 150px;
height: 150px;
background-color:#c80000;
color:#fff;
font-family:arial;
text-align:center;
float:left;
margin-left: 10px;
font-size: 20px;
cursor:pointer;
}
.content > div.maincontent + div {
display:none;
padding-top:50px;
}
.content:hover > div.maincontent {
display:none;
}
.content:hover > div.maincontent + div {
display:block;
}
http://jsfiddle.net/q92zL/4/
I'm trying to do a nice image hover overlay for a dynamic image gallery using Bootstrap 3:
<div class="section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="#">
<span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="#">
<span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="#">
<span class="overlay zoom"></span><img class="img-responsive img-home-portfolio" src="http://upload.wikimedia.org/wikipedia/commons/4/45/World_Wind_Globe_NASA_Timbuktu_1.jpg">
</a>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.section -->
For the overlay hover effect, I'm using this CSS:
a .overlay {
opacity: 0;
filter: alpha(opacity=0);
z-index: 0; /* for Opera */
}
a:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
z-index: 1; /* for Opera */
}
.overlay {
display: block;
background-color: rgba(0,0,0,0.3);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.overlay.zoom {
background-image: url(http://www.open-service.org/img/zoom.png);
}
My problem is that the overlay extends to the div size and not just to the size of the image.
To illustate this i have created this jsfiddle: http://jsfiddle.net/5AR2H/6/
Thanks.
I have two images that need to kept inline; I want to write a caption under each image.
<center>
<a href="http://example.com/hello">
<img src="hello.png" width="100px" height="100px">
</a>
<a href="http://example.com/hi">
<img src="hi.png" width="100px" height="100px">
</a>
</center>
How can I implement?
Figure and Figcaption tags:
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Gotta love HTML5.
See sample
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
<div id="container">
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<figcaption>First image</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<figcaption>Second image</figcaption>
</figure>
</a>
</div>
CSS
#images{
text-align:center;
margin:50px auto;
}
#images a{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;
}
HTML
<div id="images">
<a href="http://xyz.com/hello">
<img src="hello.png" width="100px" height="100px">
<div class="caption">Caption 1</div>
</a>
<a href="http://xyz.com/hi">
<img src="hi.png" width="100px" height="100px">
<div class="caption">Caption 2</div>
</a>
</div>
A fiddle is here.
For responsive images. You can add the picture and source tags within the figure tag.
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
<source media="(min-width: 500px)" srcset="images/image.jpg" />
<img src="images.jpg" alt="An image">
</picture>
<figcaption>Caption goes here</figcaption>
</figure>
Put the image — let's say it's width is 140px — inside of a link:
<a><img src='image link' style='width: 140px'></a>
Next, put the caption in a and give it a width less than your image, while centering it:
<a>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.
<a style='text-decoration: none; color: orange;'>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example: http://www.alphaeducational.com/p/okay.html
<div style="margin: 0 auto; text-align: center; overflow: hidden;">
<div style="float: left;">
<img src="hello.png" width="100px" height="100px">
caption 1
</div>
<div style="float: left;">
<img src="hi.png" width="100px" height="100px">
caption 2
</div>
</div>
CSS is your friend; there is no need for the center tag (not to mention it is quite depreciated) nor the excessive non-breaking spaces. Here is a simple example:
CSS
.images {
text-align:center;
}
.images img {
width:100px;
height:100px;
}
.images div {
width:100px;
text-align:center;
}
.images div span {
display:block;
}
.margin_right {
margin-right:50px;
}
.float {
float:left;
}
.clear {
clear:both;
height:0;
width:0;
}
HTML
<div class="images">
<div class="float margin_right">
<img src="hello.png" width="100px" height="100px" />
<span>This is some text</span>
</div>
<div class="float">
<img src="hi.png" width="100px" height="100px" />
<span>And some more text</span>
</div>
<span class="clear"></span>
</div>
To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this:
HTML
<div class="items">
<figure>
<img src="hello.png" width="100px" height="100px">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="hi.png" width="100px" height="100px">
<figcaption>Caption 2</figcaption>
</figure></div>
CSS
.items{
text-align:center;
margin:50px auto;}
.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}
https://jsfiddle.net/c7borg/jLzc6h72/3/
The <figcaption> tag in HTML5 allows you to enter text to your image for example:
<figcaption>
Your text here
</figcaption>.
You can then use CSS to position the text where it should be on the image.
<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>
Style as desired.