Databases
StackOverflow2013
Postsdbo
POImage transition is only catching at 2 & 4
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImage transition is only catching at 2 & 4
    primarykey
    data
    text
    <p>I've had some problems with my image transition and its only working correctly when the 1 and 3 buttons are clicked on but when the 2 and 4 are clicked on they get stuck and you can see it gets caught up by the other images before it. I need it to smooth transition for all images not just 2 and get stuck on the other 2</p> <p>I want it to look like this: <a href="http://tympanus.net/Tutorials/CSS3SlidingImagePanels/index.html" rel="nofollow">http://tympanus.net/Tutorials/CSS3SlidingImagePanels/index.html</a></p> <p>I'm attaching my css to it, but you can also go here to see it in action. Of course its had some revisions to make it work for the content I have. But any help would be great. Thanks!!</p> <p><a href="http://ricapeeka.com/tester/" rel="nofollow">http://ricapeeka.com/tester/</a></p> <pre><code>.cr-container { width: 960px; height: 600px; position: relative; margin: 0 auto; text-align: center; } .cr-container label { font-style: italic; width: 240px; height: 30px; cursor: pointer; color: #fff; line-height: 32px; font-size: 24px; float: left; position: relative; margin-top: 35px; z-index: 1000; } .cr-container label:before { content: ''; width: 34px; height: 34px; background: #1D3867; position: absolute; left: 50%; margin-left: -17px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,0.3); z-index: -1; } .cr-container label:after{ width: 1px; height: 400px; content: ''; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#00ffffff',GradientType=0 ); position: absolute; bottom: -20px; right: 0px; } .cr-container label.cr-label-img-4:after{ width: 0px; } .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1, .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2, .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3, .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 { color: #1D3867; } .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before, .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before, .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before, .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before { background: #fff; box-shadow: 0 0 0 4px #1D3867; } .cr-container input { display: none; } .cr-bgimg { width: 960px; height: 600px; position: absolute; left: 0; top: 0; z-index: 1; } .cr-bgimg { background-repeat: no-repeat; background-position: 0 0; } .cr-bgimg div { width: 240px; height: 100%; position: relative; float: left; overflow: hidden; background-repeat: no-repeat; } .cr-bgimg div span { position: absolute; width: 100%; height: 100%; top: 0; left: -240px; z-index: 2; text-indent: -9000px; } .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) { background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-26.png); } .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) { background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-27.png); } .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) { background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-28.png); } .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-29.png); } .cr-bgimg div:nth-child(1) span { background-position: 0 0; } .cr-bgimg div:nth-child(2) span { background-position: -240px 0; } .cr-bgimg div:nth-child(3) span { background-position: -480px 0; } .cr-bgimg div:nth-child(4) span { background-position: -720px 0; } .cr-container input:checked ~ .cr-bgimg div span { -webkit-animation: slideOut .6s ease-in-out; -moz-animation: slideOut .6s ease-in-out; -o-animation: slideOut .6s ease-in-out; -ms-animation: slideOut .6s ease-in-out; animation: slideOut .6s ease-in-out; } @-webkit-keyframes slideOut { 0% { left: 0; } 100% { left: 150px; } } @-moz-keyframes slideOut { 0% { left: 0; } 100% { left: 150px; } } @-o-keyframes slideOut { } 100% { left: 150px; } } @keyframes slideOut { 0% { left: 0; } 100% { left: 150px; } } .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) { -webkit-transition: left .5s ease-in-out; -moz-transition: left .5s ease-in-out; -o-transition: left .5s ease-in-out; -ms-transition: left .5s ease-in-out; transition: left .5s ease-in-out; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; left: 0; z-index: 10; } .cr-titles h3 { color: #fff; text-shadow: 1px 1px 6px #333; } .cr-titles h3 span { z-index: 10000; position: absolute; width: 94.5%; left: 0; text-align: center; opacity: 0; top: 50%; -webkit-transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; -o-transition: opacity .8s ease-in-out; -ms-transition: opacity .8s ease-in-out; transition: opacity .8s ease-in-out; } .cr-titles h3 span:nth-child(1) { font-family: texgyreadventor, Arial, sans-serif; font-size: 60px; display: block; letter-spacing: 7px; line-height: 40px; } .cr-titles h3 span:nth-child(2) { margin-top: 69px; background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-30.png), url(/wp-content/uploads/2013/09/Education-Page-Element-31.png); height: 53px; font-size: 20px; padding: 26px; font-style: italic; font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; } .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1) span:nth- child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) span:nth-child(1), .cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) span:nth-child(1), .cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) span:nth-child(1), .cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1) span:nth-child(2), .cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) span:nth-child(2), .cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) span:nth- child(2) { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .collegesFrameDescription { display: block; width: 900px; padding: 10px 30px; color: #fff; font-size: .85em; position: absolute; height: 125px; z-index: 9; bottom: 0; opacity: 0; text-align: left; -moz-column-count: 3; -webkit-column-count: 3; -ms-column-count: 3; column-count: 3; -moz-column-gap: 20px; -webkit-column-gap: 20px; -ms-column-gap: 20px; column-gap: 20px; } .cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1) .collegesFrameDescription, .cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) .collegesFrameDescription, .cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) .collegesFrameDescription, .cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) .collegesFrameDescription { opacity: 1; -webkit-transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; -o-transition: opacity .8s ease-in-out; -ms-transition: opacity .8s ease-in-out; transition: opacity .8s ease-in-out; } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USViper
    1. USrica
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POImage transition is only catching at 2 & 4
      1. USSadiq
      1. VTFavorite
    2. VO
      singulars
      1. POImage transition is only catching at 2 & 4
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COAny chance you can pare that code down to a bare minimum example?
      singulars
      1. POImage transition is only catching at 2 & 4
      1. USj08691
    2. COAnd please post a demo @ jsfiddle.net
      singulars
      1. POImage transition is only catching at 2 & 4
      1. USYuriy Galanter
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload