CSS3 hover

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP ontwikkelaar

Functie Met een complex en uitgebreid e-commerce platform, een eigen PIM-systeem en eigen scan applicatie – krijg jij dagelijks te zien hoe jouw werk gebruikt wordt door miljoenen gebruikers. En we staan qua development pas in de startblokken, aangezien er nog meerdere projecten op de plank liggen te wachten! Ons huidige development team bestaat uit 8 programmeurs. Er wordt dagelijks gereflecteerd op geschreven code, Scrum taken en kennisdelen onderling is een must. Onze voertaal binnen ons team is Engels, dit omdat wij twee internationale collega’s hebben. Ons huidige “IT Landschap” bestaat voornamelijk uit allerlei losse onderdelen die individueel, maar ook

Bekijk vacature »

Junior .NET developer

Functie Jij hebt natuurlijk net jouw Bachelor op zak en gaat nu voor het eerst aan de slag bij een werkgever als junior .NET ontwikkelaar. Waarschijnlijk lijkt het jou spannend om ineens aan de slag te gaan bij klanten in de consultancy. Maak je niet druk, jij komt hier terecht in een warm bad en wordt totaal niet in het diepe gegooid. Zodra jij hier begint wordt jij gekoppeld aan een persoonlijke manager met een persoonlijk ontwikkelplan. Jij krijgt een scala aan trainingen, denk aan trainingen ten behoeve van het opdoen van zelf kennis en gedragscompetenties, maar ook trainingen voor

Bekijk vacature »

Software developer (Python)

Functie Je komt te werken in het IT-team bestaande uit de Lead developer en 4 (medior/senior) developers. Gezamenlijk werken jullie aan de verbetering en uitbreiding van de software. Binnen het development team is er veel vrijheid en zelfstandigheid, zonder dat ze hiermee afdoen aan de kwaliteit. Zo hebben ze elke ochtend een korte stand-up (10:00 uur) en houden ze zo nu en dan pair-programming sessies. Ook is er een hele professionele ontwikkelcyclus waarbij code altijd eerst door een collega wordt getest voordat het naar deployement gaat. Je hebt in je werk oog voor kwaliteit, risico’s en het klantbelang. Communicatie met

Bekijk vacature »

Junior Fullstack Developer

Functie omschrijving Heb jij je universitair diploma Informatica afgerond en ben jij op zoek naar een startersfunctie waar jouw ontwikkeling in een hoog vaandel staat? Voor een softwarebedrijf in Amsterdam zijn wij op zoek naar een Junior Fullstack Developer. Je begint met een op maat gemaakte training om de kennis bij te spijkeren die jij nog mist. Uiteraard leer je het meeste tijdens je werk, maar de training geeft je hiervoor alvast de juiste handvatten. Je kunt het volgende verwachten! Jij ontwikkelt in technieken als Java, Javascript en SQL. Je werkt hierbij volgens de Agile/Scrum methode; Na het afronden van

Bekijk vacature »

OutSystems Developer

Dit ga je doen Het van scratch af aan ontwikkelen van applicaties met OutSystems; Het aanhaken bij diverse projecten binnen de organisatie; Schakelen met de business; Meedenken over de mogelijkheden van het platform binnen de organisatie. Hier ga je werken Deze organisatie is een toonaangevende speler in de vastgoedbranche en telt momenteel ruim 500 medewerkers. Met meer dan 150 applicaties staat er een complex applicatielandschap, bestaande uit standaard- en maatwerkapplicaties. De maatwerkapplicaties worden ontwikkeld door een inhouse development team. Het doel voor de komende periode is het verder vernieuwen en optimaliseren van het huidige applicatielandschap. Zo staat de organisatie aan

Bekijk vacature »

Database ontwikkelaar

Functieomschrijving Wil jij aan gave logistieke softwareprojecten werken en bij een uniek softwarebedrijf in de regio van Tilburg? Wacht niet langer en reageer snel op deze vacature. Als Database ontwikkelaar ga je aan de slag het schrijven van stored procedures en verder uitbouwen van de SQL database. Je werkt in een database team, met allemaal mensen die energie krijgen van software en techniek. Verder krijg je als taak: Optimaliseren en uitbouwen van de MS SQL databases die gebruikt worden; Optimaliseren van query's, waardoor er efficiënter gewerkt kan worden; Je werkt met de technieken T-SQL of PL/SQL; Bij interesse kan je

Bekijk vacature »

Applicatie ontwikkelaar

Functie omschrijving Zelfstandige applicatie ontwikkelaar gezocht voor familiair bedrijf in omgeving Rotterdam! Ben jij op zoek naar een nieuwe uitdaging en zoek jij een informele werkgever waar je zelfstandig kunt werken binnen een leuk IT team, lees dan snel verder want wie weet zijn wij op zoek naar jou! Binnen deze rol houdt jij je met het volgende bezig: Onderhouden en ontwikkelen van de IT systemen; Opzetten van Azure Cloud systemen, denk aan interfaces, hardware op de Cloud, webportalen of BI functies; Werken aan scripts binnen verschillende software applicaties, denk aan ERP en CAD; Ontwikkelen en implementeren van MS PowerApps

Bekijk vacature »

Medior/senior Python developer

Functie Bedrijven komen bij deze organisatie om technische vraagstukken op te lossen en hierin ook tot oplossingen te komen waar ze zelf misschien niet aan gedacht hadden. Jij gaat vanuit je ervaring dus niet alleen hands-on aan de slag met het ontwikkelen, maar zult ook zeker adviseren en proactief meedenken met de klant. Er zijn meerdere lange en/of korte projecten en het type klanten is heel uiteenlopend. Zo kun je terecht komen in een multidisciplinair scrumteam waarin je als Python developer meewerkt, of juist voor een kleiner (Greenfield) project aan de slag gaan waarin je veel breder bezig bent. Door

Bekijk vacature »

Junior .NET developer

Functie Als junior .NET developer start jij in een development team met twee ervaren software ontwikkelaars. Jouw persoonlijke ontwikkeling is voor ons erg belangrijk en jij gaat dan ook meelopen met onze Senior .NET ontwikkelaar die jou met zijn kennis en ervaring een goede begeleiding kan aanbieden. Als team zijn jullie verantwoordelijk voor het schrijven van software voor onze toonaangevende Automatiseringssystemen. Jij gaat aan de slag met de onderhoud van de kernsoftware, ondersteund de software van derden door het gebruik van onze webservices en als team zijn jullie verantwoordelijk voor het ontwikkelen van onze backend oplossingen. Wij maken op dit

Bekijk vacature »

Junior PHP (Laravel) Developer

Functie omschrijving Wij zijn op zoek naar een PHP Laravel Developer! Sta je aan het begin van je carrière en ben je op zoek naar een leuke baan? Lees dan verder! Voor een softwarebedrijf in omgeving van Schiphol zijn wij op zoek naar een ervaren PHP (Laravel) Developer. Je gaat je bezighouden met het ontwikkelen van innovatieve bedrijfsapplicaties. Samen met het team, bestaande uit designers en developers, maak je mooie oplossingen voor bedrijven in diverse branches. Je zorgt dat de opgeleverde websites perfect werken en de klant meer dan tevreden is. Je kunt rekenen op een afwisselende baan met leuke

Bekijk vacature »

Ambitieuze Junior/Medior Low-code Developers gezoc

Bedrijfsomschrijving Transformeer bedrijven met jouw expertise in innovatieve technologie Ben je een bedreven softwareontwikkelaar met ervaring in Low-code platformen, of sta je te popelen om je in deze baanbrekende oplossing te verdiepen? Wij zijn op zoek naar jou! Ons klantenbestand groeit en we willen ons team uitbreiden met deskundige en leergierige Low-code specialisten. Is het jouw passie om organisaties te ondersteunen in hun digitale transformatie en maatwerkoplossingen te bieden met behulp van geavanceerde software? Wij zijn een vooruitstrevend bedrijf dat dagelijks werkt aan het oplossen van complexe vraagstukken om de digitale ambities van onze klanten te realiseren. Functieomschrijving Ontwikkel op

Bekijk vacature »

Hands-on Solution Architect / Software Architect (

TenneT is hard groeiend om de onze ambities waar te kunnen maken. Zo nemen wij een leidende rol in het aanjagen van de energietransitie. Het werven van nieuw talent speelt daarin een cruciale rol. Wij zijn op zoek naar een gedreven Solution Architect / Software Architect op onze locatie Arnhem die hieraan wil bijdragen en misschien ben jij dat wel? Jouw bijdrage aan TenneT Je werkt samen met gedreven DevOps teams, bestaande uit frontend, backend en middleware developers, testers, UX-designers. Samen met de teams ben je continu op zoek naar de beste oplossingen voor onze klanten. Als Solution Architect onderzoek

Bekijk vacature »

Fullstack developer

Functie omschrijving We are looking for a dutch native speaker Wil jij werken als Senior Developer en werken aan een applicatie die duizenden marketingcampagnes automatisch aanstuurt? Dit is je kans! Kom werken voor onze opdrachtgever en in deze rol zul je veel vrijheid en verantwoordelijkheid krijgen om gezamenlijk de applicatie naar een hoger plan te tillen. Wat ga je verder doen: Optimaliseren, beheren en uitbreiden van onze applicatie; Het bouwen van aansluitingen op de systemen van partners middels API’s; Meedenken over de technische/ontwikkel-standaarden; Proactief verbeterpunten voorstellen. Bedrijfsprofiel Het is een organisatie die met een team van verschillende developers én marketeers

Bekijk vacature »

Full Stack Developer

Ben jij een kei van een full-stack developer? Heb je ambitie om te groeien en jezelf te ontwikkelen binnen een ambitieus bedrijf? Gaat jouw hart sneller kloppen van transpilers of frameworks zoals Angular, Vue of React? Dan ben jij de persoon die wij zoeken! Voor onze opdrachtgever zijn wij op zoek naar een full-stack developer om onderdeel te zijn van een team dat bestaat uit gedreven developers. Ieders met hun eigen specialiteiten en kennis van de projecten en behoeften vanuit de product owners. We zoeken iemand die met zijn/haar huidige competenties en domeinen dit team wil begeleiden, stimuleren en tevens

Bekijk vacature »

Gezocht: Ervaren VB6 developer met C# ambitie!

Bedrijfsomschrijving Dit bedrijf is een vooraanstaande softwareleverancier die gespecialiseerd is in het ontwikkelen van software pakketten voor autoschade herstel bedrijven. De software wordt gebruikt door meer dan de helft van alle autoschade herstel bedrijven in Nederland. Het team van professionals is op zoek naar getalenteerde collega developers die hun vaardigheden willen inzetten om het bedrijf te laten groeien. Functieomschrijving Voor dit bedrijf zoek ik een ervaren VB6 / VB.NET developer met interesse om op termijn verder te gaan in C#. In deze functie ben je verantwoordelijk voor het onderhouden van de bestaande softwarepakketten. Een deel van de code is nog

Bekijk vacature »
Casper B

Casper B

15/09/2012 16:32:08
Quote Anchor link
Beste allemaal,

Ik wil het volgende bereiken:

http://andreagandino.com/themes/acidrain/?page_id=817

Waneer je over een thumb gaat, bijv de tweede, dan krijg je een plusje in een beweging te zien. Dit is met css3 bereikt, maar helaas lukt dit mij niet. Ik heb namelijk geen idee hoe nou die opbouw van divs en css3 transition werkt. Kan iemand mij helpen?
 
PHP hulp

PHP hulp

05/11/2024 15:42:05
 
Joakim Broden

Joakim Broden

15/09/2012 16:58:35
Quote Anchor link
Opbouw is bv:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
    <a href="#" title="afbeelding">
        <img src="afbeelding.jpg" alt="afbeelding" />
        <span class="overlay"></span>
    </a>

CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    a {
        display: block;
        position: relative;
        width: 150px;
        height: 150px;
        overflow: hidden;
    }

    a img {
        position: absolute;
        top: 0;
        left: 0;
    }

    a .overlay {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        width: 150px;
        height: 150px;
        background: red;
    }

    a:hover .overlay {
        display: block;
    }    


Voor speciale effecten met CSS3 moet je maar ff google ;-) Maar hier heb je alvast een voorbeeld.
 
Niels Peeren

Niels Peeren

15/09/2012 17:53:03
Quote Anchor link
met transitions werken is niet moeilijk

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */


dit zet je bij je main div

dan bij de hover div :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.test:hover
{
  width:500px;
}


wat hij gaat doen is de breedte van 200 px naar 500px transitionen in 2 secondes dit werkt ook met opacity

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
opacity:1.0;
transition:opacity 2s;
-moz-transition:opacity 2s; /* Firefox 4 */
-webkit-transition:opacity 2s; /* Safari and Chrome */
-o-transition:opacity 2s; /* Opera */


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.test:hover
{
  opacity:0.5;
}


probeer dit ff
 
Casper B

Casper B

15/09/2012 18:04:22
Quote Anchor link
Ik heb de code van Hertog Jan bekeken en toe proberen te passen in mijn website. Al krijg ik de hover niet te zien. Hierbij mij code van een project item met thumb.

HTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
                    <li class="grid_4 projectbox alpha">
                        <a href="#">
                        <div class="thumbnails">
                            <img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
                            <span class="overlay"></span>
                        </div><!-- End .thumbnails -->
                        </a>
                    <div class="description">
                            <h3><a href="#">Title Project</a></h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
                            </p>
                        </div><!-- End .description -->
                        <div class="tags">
                            Tags: Photoshop, Illustrator, Graphic design
                        </div><!-- End .tags -->
                    </li><!-- End li.grid_4 projectbox -->


CSS

(Dit is nog voordat ik de code toepaste van Hertog Jan).
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.projectbox {
    height: auto;
    width: 300px;
    margin: 10px auto 0 0;
    padding: 0;
    padding-bottom: 10px;
    background: #FFF;
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
}
.projectbox:hover h3 a {
    color: #c0479a;
    text-decoration: underline;
}
.thumbnails {
    height: auto;
    width: 100%;
    margin: 0 auto;
    float: left;
    opacity: 0.5;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    position: relative;
}
.thumbnails:hover {
    opacity: 1.0;
}

.overlay {
    background: url(../images/link-icon.png);    
}

.description {
    padding: 0 10px;
    float: left;
}
.tags {
    padding: 0 10px 10px;
    float: left;
    color: #999;
}


Hopelijk komen we er uit!

Toevoeging op 15/09/2012 19:15:21:

Ik heb het tot zover, dat de overlay boven de afbeelding is gekomen. Nu wil ik dan nog als laatst een transition, zoals de site hierboven eerder vermeld. Dat er een plusje van een niks tot een rondje wordt vergoot.

Via firebug, geeft hij aan dat dit de css daarvoor is
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    -moz-transition: all 0.1s ease-in-out 0s;


Maar naar het uitproberen, werkt dit niet bij mij. Waar kan dit aan liggen?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.