Member Avatar for dello

Hi ,

I want to incorporate a feature on my website.

An example of what I want to do is here: http://www.maxxcount.de - specifically the flash box in the middle of the page.

I was wondering if a similar effect can be achieved using CSS? I have searched around and can't seem to find any tutorials etc - If anyone can please help me?

I will do the work myself but I just need a push in the right direction!

  • 2 Contributors
  • 4 Replies
  • 125 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by dello

Dani AI

Generated

The example in the original post is a clickable/mouseover image rotator; a modern, Flash-free approach is to layer real images (or pseudo-elements) and animate opacity or transforms when the active slide changes. This avoids trying to animate background-image (not animatable) and keeps transitions smooth on most devices. The suggestion from to use JavaScript is on point; the pattern below uses minimal JS to toggle classes and CSS for the visual work, so it works with or without jQuery. 's found example shows the same idea in practice.

A compact pattern (structure + behavior):

<div class="rotator" role="region" aria-label="Rotating images">
  <div class="slides">
    <img src="large1.jpg" alt="Caption 1" class="slide active">
    <img src="large2.jpg" alt="Caption 2" class="slide">
  </div>
  <div class="controls">
    <button data-index="0" class="thumb">1</button>
    <button data-index="1" class="thumb">2</button>
  </div>
</div>
.slides .slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
                 opacity:0; transition:opacity .5s ease; }
.slides .slide.active { opacity:1; z-index:1; }
document.querySelector('.controls').addEventListener('click', e => {
  const b = e.target.closest('button[data-index]'); if (!b) return;
  document.querySelectorAll('.slide').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('.slide')[b.dataset.index].classList.add('active');
});

Practical tips: preload slides to avoid flicker; use object-fit / srcset / <picture> for responsive images; provide keyboard and ARIA support for accessibility; hardware-accelerate transforms when animating position or scale. For a no-JS solution, create a radio-button/label-based CSS-only rotator. For reference on transitions and image fitting, see the MDN docs for CSS transitions and object-fit. These techniques recreate the Flash-style switch with far better compatibility and control.

Recommended Answers

All 4 Replies

Member Avatar for Member #334542

You can achieve this with JQuery, but I am not sure it will beat the flash. Within flash you can't able to download that image but with css and jquery you just right click and download the image and one more thing you should have the text within that image while using jquery. Within flash you can also animate the text side by side with the navigation buttons.

The shown work is simplified in flash when compare to jquery & CSS.

Edited by Member #334542 because: n/a
Member Avatar for dello

thanks raj... i dont want it to "beat the flash"

i know its not comparable, it's just that i would like to achieve a similar effect. i.e mouseover or click an image and the larger background image/layer changes .

i'm not too concerned about right-click download or animating the text, its just the basic effect i am after....

Member Avatar for Member #334542

Then go ahead. Following are the good tutorials on jquery:

hope this solves!

Edited by Member #334542 because: n/a
commented: Nice links +11
Member Avatar for dello

thanks raj - i just found this link from another site and then I came back here to report that I have found exactly what I am looking for...

i saw your response and the top item in the link is the one i want :)

many thanks for your help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.