I want to hover on image. When I do hover on it the opacity of the image will be decreased and the text will appear on the image. I kinda did something. In my container I have 3 different images which are under same class name. I think that's why when I hover one image other two image is affected .How can I fix it? Sİnce I hve been trying to solve it for a long time, My brain stopped working.
What I want when I hover one image, only that image will be affected. Here is my code. Thanks all
<div class="main-blog-items">
<div class="blog-baslik">
<h4>BLOG & HABERLER</h4>
</div>
<div class="row">
<div class="col-md-4">
<div class="blog-icerik">
<div class="blog-img">
<img src="img/carousel2.jpg">
</div>
<div class="overlay-blog">
<div class="blog-content">Blog Yazısı 1</div>
</div>
</div>
<div class="blog-item-title">
<p>Title</p>
</div>
</div>
.overlay-blog {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.main-blog-items:hover .blog-img {
opacity: 0.3;
}
.main-blog-items:hover .blog-item-title{
opacity: -5;
}
.main-blog-items:hover .overlay-blog {
opacity: 1;
}
use this instead
.blog-icerik:hover {
opacity: 0.3;
}
.blog-icerik:hover .overlay-blog {
opacity: 1;
}
.blog-icerik:hover ~ .blog-item-title{
opacity: 0;
}
Related
I have an accordion.. while opening it is opening slowly but while closing its closing very fasting within fraction of ms range. Kindly help me to change the animation while closing.
I am here by sharing my HTML and css code,
Please help.
HTML Code:
<accordion>
<accordion-group #groupUser class="outer admin">
<div accordion-heading >
ABCD
<i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': !groupUser?.isOpen}"></i>
</div>
<div layout="row" class="row listing-element tracking-listing">
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Car</div>
</div>
</div>
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Bike</div>
<div layout="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Auto</div>
</div>
</div>
</accordion-group>
</accordion>
CSS:
#wd-faq .outer .panel-collapse .panel-body {
margin-top: 18px;
border: 0;
background-color: blue;
-webkit-animation:all 150ms;
overflow:hidden;
}
#keyframes all {
0% {
height:0px;
}
100% {
height:auto;
}
}
The CSS i pasted above is of opening accordion. Help me for Closing accordion.
Thanks in Advance.
Try like this in yout HTML Code
HTML CODE
<accordion>
<accordion-group #groupUser class="outer admin">
<div accordion-heading >
ABCD
<i class="pull-right" [ngClass]="{'closeArrow': groupUser?.isOpen, 'openArrow': !groupUser?.isOpen}"></i>
</div>
<div class="slideInDown">
</div>
<accordion-heading>
<accordion>
and change your CSS with these codes
CSS
.slideInDown{
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-duration: 80ms;
animation-duration: 80ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
I dont know it satisfies your requirement properly or not but you can try once.
I think the main problem is with the animation. It's not the best choice for the toggle animation. If you check your animation you can see there it is only an open animation. You can use two animation or only one and make it reverse direction with css but it would be pain in the ass and also produce a terrible code. But you can use transition which is works perfectly and it is looks more better and produce less code.
Here is the code:
CSS:
There is an .accordion class which is 0 at the beginning and I have a transition which 2s long. I use max-height because auto won't work and it will be as high as the content when it's opened.
.accordion {
background-color: lightgreen;
max-height: 0;
overflow: hidden;
transition: max-height 2s;
}
.accordion.open {
max-height: 200px;
}
HTML:
In the HTML i have a click event on a button which open the div. It has a toggle function. On the accordion div there is an ngClass with the open class and with an isOpen boolean.
<button (click)="toggle()">OPEN</button>
<div class="accordion" [ngClass]="{'open': isOpen}">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
TypeScript code:
This is a simple code for checking the state of the accordion.
isOpen:boolean = false;
public toggle() {
if(this.isOpen) {
this.isOpen = false;
}else {
this.isOpen = true;
}
}
And that's all. I hope you understand my English :D.
And here is a WORKING PLUNK.
I started a project in Notepad++ and I would like to create a slider on hover while using CSS. The problem is that I do not know if my picture (which I wanted to create a slider with) needs to be separated in 2 images or 1 merged picture. I also don't know if translate3d works in notepad++.
Here's what my HTML looks like:
<div class="college">
<img src="image.png" />
and here's my current CSS:
body {
background: url("anotherimage.png") 33em 0% fixed no-repeat;
background-color: rgb(0,85,170);
}
.college {
margin-left: 100px;
margin-top: 325px;
overflow: hidden;
}
.college img {
}
.college img:hover {
}
edit
hello again, after we've found out about my problem with hovering sliding images, i managed to make my own ligns of codes but now im stuck into another problem, while i was douing my code my images were going behind the background which i liked it very much but when i finished all of it, it stopped douing it ,i've tried using overflow: hidden and postion: absolute but i don't really get how it works especially since when i search what their fonction does. and i thought i was douing right but it seems it doesn't change anything at all,
so i would like to know how i manage to make my moving pictures to go out of the screen/ hide inside the background.
here what my css looks like
` .college .image {
margin-left: 100px;
margin-top: 475px;
position: absolute
}
.college .imagesecond {
transform: translate(0px,500px);
transition: transform 1s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.college:hover > .imagesecond{
transform: translate(0,-200px);
}
.lycee .image {
margin-left: 700px;
margin-top: 500px;
position: absolute
}
.lycee .imagefourth{
transform: translate(0px,500px);
transition: transform 0.9s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.lycee:hover > .imagefourth{
transform: translate(0,-500px);
}
.formation .image{
margin-left: 1250px;
margin-top:510px;
overflow: hidden;
}
.formation .imagesixth{
transform: translate(0px,100px);
transition: transform 1s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.formation:hover > .imagesixth{
transform: translate(0 ,-75
0px);`
here is my html
<div class="saintemarie">
<a href="">
<div class="college">
<img class="image imagefirst" src="choixcollege.png" />
<img class="image imagesecond" src="pepepls.gif"/>
</div>
</a>
<a href="lyceesaintemarie.html">
<div class="lycee">
<img class="image imagethird" src="choixlyceepro.png" />
<img class="image imagefourth" src="pepepls.gif" />
</div>
</a>
<a href="c&fsaintemarie.html">
<div class="formation">
<img class="image imagefifth" src="choix
centre&formation.png" />
<img class="image imagesixth" src="pepepls.gif" />
</div>
</div>
</a
I'm not fully sure what you're asking but is this what you're wanting? If so you're more interested in transitions or animations, hover within the blue border
https://jsfiddle.net/gevfeqk9/24/
.college {
margin: auto;
overflow: hidden;
border: 1px solid blue;
}
.college .image-1{
transform: translate(-280px,0);
transition: transform 1s ease-in-out 0s;
}
.college .image-2{
transform: translate(-560px,0);
transition: transform 1s ease-in-out 0s;
}
.college:hover .image-1,.college:hover .image-2{
transform: translate(0,0);
}
When hovering the image ,image moves to the left,I want it to stay at the new position where it moved to, while moving the pointer away.
Thanks in advance
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
#twit:hover .move{
transform: translate(-350px,0) rotate(-360deg);
transition:all 2s linear;
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
What you want can be achieve, but you need to remove your :hover selector and use that as css animation. Another way is using jQuery mouseenter event.
Using CSS animation and removing hover selector.
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
.move{
-webkit-animation:mv 2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes mv{
from{
transform: translate(0,0) rotate(0deg);
}
to{
transform: translate(-350px,0) rotate(-360deg);
}
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
Another way is using jQuery mouseenter event, which performs same css animation, but stop your element at new position.
$(document).ready(function(){
$("#twit").on("mouseenter",function(){
$("#twit > .object").addClass("nwmv");
});
});
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
.nwmv{
-webkit-animation:mvv 2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes mvv{
from{
transform: translate(0,0) rotate(0deg);
}
to{
transform: translate(-350px,0) rotate(-360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
Using Javascript,
var b = document.getElementById("twit");
b.onmouseenter = function mv(){
var a = document.querySelector(".move");
a.style.transition = "2s ease";
a.style.transform = "translate(-350px,0) rotate(-360deg)";
}
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
I am having trouble with stacking images in HTML/CSS for some reason. I have three slides, stacked on top of each other, slightly offset so that they peak out from under one another, bottom-to-top. The animation I am using should allow them to slide over to the right when I hover on the edge that is "peaking out." It works perfectly with two images, but for some reason, when I added a third to the pile, the animation for the bottom two stopped working. NO CLUE why this won't work.
Here is the code:
#containerContainer {
position: relative;
}
#instashContainer,
#wisdomCotainer,
#visContainer {
position: absolute;
height: 744px;
width: 1860px;
overflow: hidden;
}
#instashContainer img,
#wisdomContainer img,
#visContainer img {
opacity: .7;
position: absolute;
left: 0px;
top: 0px;
transform: translate3d(-1600px, 0px, 0px);
transition: transform .6s ease-in-out;
}
#instashContainer img:hover,
#wisdomContainer img:hover,
#visContainer img:hover {
transform: translate3d(0px, 0px, 0px);
}
<div id="containerContainer">
<!--Inspiration Slidepage-->
<div id="instashContainer">
<img src="instash_slidepage.jpg" height=744 width=1820>
</img>
</div>
<!--Wisdom Slidepage-->
<div id="wisdomContainer">
<img src="wisdom_slidepage.jpg" height=744 width=1780>
</img>
</div>
<!--Visualization Slidepage-->
<div id="visContainer">
<img src="visualization_slidepage.jpg" height=744 width=1740>
</img>
</div>
</div>
When I add the third image, on top of the other two, the animation for the other two stops working, but the animation for the top image works (i.e. it slides to the right). When I remove the top image, but change nothing else, the animation for the other two works again.
Why? Also, how can I add this third image without impacting the animation of the other two images?
Problem
you have a typo here: #wisdomCotainer, should be#wisdomContainer
Notes
don't use HTML tags width/height, use instead CSS
<img> tag are self-closed tags, therefore don't need </img>
and you can simplify your CSS in this case by using the direct child selector >
#containerContainer {
position: relative;
}
#containerContainer > div {
position: absolute;
height: 744px;
width: 1860px;
overflow: hidden;
}
#containerContainer > div img {
opacity: .7;
position: absolute;
left: 0px;
top: 0px;
transform: translate3d(-1600px, 0px, 0px);
transition: transform .6s ease-in-out;
height: 744px;
width: 1820px;
}
#containerContainer > div img:hover {
transform: translate3d(0px, 0px, 0px);
}
<div id="containerContainer">
<!--Inspiration Slidepage-->
<div id="instashContainer">
<img src="//lorempixel.com/1280/744" />
</div>
<!--Wisdom Slidepage-->
<div id="wisdomContainer">
<img src="//lorempixel.com/1280/744" />
</div>
<!--Visualization Slidepage-->
<div id="visContainer">
<img src="//lorempixel.com/1280/744" />
</div>
</div>
You've got a typo error here :
#instashContainer, #wisdomCotainer, #visContainer {
}
Should be #wisdomContainer instead.
Hopefully tis is a reallllly easy fix that I'm just not seeing, but I've been trying every solution I could find that arched even close to this in previously submitted questions and I'm just getting nowhere.
The short of it: I've got a CSS tab setup working that's great, EXCEPT for when it comes to styling the actual labels on the tabs. It works great with a single style, but as soon as I try to introduce a secondary font style (bringing the font size down to 11px), the right hand side of the tab disappears.
And unfortunately I NEED to be able to have those two different font sizes/styles displayed in the tab label. I've tried using span, div, etc. treatments but everything makes the right border of the tab go away. Any help is HUGELY appreciated!
Here's a fiddle: http://jsfiddle.net/wKtPL/
Here's my sample HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Library <div class='tab-count'> 123</div></label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Institution’s Subscriptions</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Copyright Agent</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Internet Archive</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">HathiTrust</label>
<div class="content">
content goes here
</div>
</div>
And the CSS behind it:
.tabs {
position: relative;
min-height: 550px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #dadcde;
color: #3f4b54;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
font-size: 14px;
font-weight:bold;
margin-right:5px;
}
.tab-count {
font-size: 11px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 3px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
By secondary font style do you mean the div nested in the label? If that's the one with class .tab-count you could set float:right. That will keep it in the same line.
.tab-count {
font-size: 11px;
float:right;
}
A couple of things, firstly the 123 is being hidden under the .content so you need a taller top value.
Secondly, your labels, while being position: relative; are still only being implicitly rendered as display: inline;, so it's hiding the 123 div underneath the label itself.
http://jsfiddle.net/wKtPL/1/
.tab label {
[ ... ]
display: inline-block;
min-height: 2.5em;
}
.content {
[ ... ]
top: 60px;
}
... and muck with styling as you need.
This is caused by the usage of a block element inside your label element, which is an inline element. To fix this, change your <div class='tab-count'> 123</div> to <span class='tab-count'> 123</span>. Here is a demo of it.
If you want to allow block-level elements to be placed within inline elements, you could like #setek said, use the alternative inline-block which is a kind of hybrid of block elements and inline elements.
You should never use block elements inside inline elements, since that will cause problems like this one. What was happening was that the styles for the inline <label> tag were being dragged across 2 lines, since the <div> was taking up an extra line. That dragged the left border down a line too, which is why you didn't see it anymore (it was below the other tabs).