CSS3 hover

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior Fullstack Developer (GOLang, TypeScript)

Bedrijfsomschrijving Our client is one of the large worldwide accounting firms. Functieomschrijving We are looking for a senior (all-round) developer (Project On Demand / Tax Technology) Uses as much as possible technology in support of the development process: Git, Jenkins, Docker, npm, skaffold, helm, etc. We are looking for a real hands-on developer; ie not a team lead or other managerial-style role; Acts with integrity both internally and externally and takes personal responsibility in this respect; Curious about the developments within their field and driven to make a difference with the team; Able to empathize with colleagues and stakeholders and

Bekijk vacature »

.NET developer

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

In-house .NET software developer

Functie omschrijving Ben jij op zoek naar een uitdagende in-house development functie? Maak jij graag hét verschil m.b.t. interne automatisering? Haal jij energie uit het automatiseren van processen voor je eigen collega's? Dan hebben wij de perfecte vacature voor je! Voor een gezellig Brabants familiebedrijf, zijn wij op zoek naar een .NET software developer. Je gaat in deze zelfstandige functie werken aan de ontwikkeling van eigen applicaties & en het koppelen van deze applicaties aan de ingekocht software. Jouw werkzaamheden zien er als volgt uit: Het management team signaleert behoeftes vanuit de business. Vervolgens worden deze behoeftes uitgewerkt en geprioriteerd.

Bekijk vacature »

Front-end Developer (HTML/CSS, Angular/React/Vue,

Functie Je zal aan de slag gaan in een klein, hecht team met front-end development experts die de ambitie delen mooi werk te leveren. Samen met hen zal je werken aan het gebruiksvriendelijk en interactief maken van complexe webapplicaties, websites en mobile apps. Je levert klanten wat ze nodig hebben terwijl je actief aan jezelf blijft werken met de ondersteuning vanuit je werkplek. Talen als Javascript programmeer jij vloeiend en je hebt kennis van frameworks als React en Angular. Je zou je het liefst nog veel meer ontwikkelen in verschillende front-end talen. Deze kennis deel je graag met je collega’s,

Bekijk vacature »

PHP/Symfony developer

Functieomschrijving Vanuit het hoofdkantoor in omgeving Bergen op Zoom ben je als PHP/Symfony Developer niet alleen bezig met software ontwikkeling. Je bent buiten ontwikkeling ook continu bezig met het zoeken naar nieuwe trends en ontwikkelingen die van waarde kunnen zijn voor de efficiëntie van software ontwikkeling. Techstack: PHP, Symfony & mySQL. Jouw takenpakket ziet er als volgt uit: Het ontwerpen en implementeren van webapplicaties met het Symfony-framework; Het testen van ontwikkelde applicaties om te zorgen dat ze goed functioneren en voldoen aan de eisen van de klanten; Het schrijven van een schone en efficiënte code volgens het Symfony framework; Onderhouden

Bekijk vacature »

Back-end programmeur

Functieomschrijving Heb jij kort geleden je MBO of HBO ICT in ontvangst mogen nemen? Of ben je klaar voor een nieuw hoofdstuk in jouw carrière? Voor een uitdagende werkgever in de regio van Tilburg zijn wij op zoek naar een ambitieuze back-end programmeur met affiniteit met MS Acess. Samen met een enthousiast team ben je verantwoordelijk voor het bouwen van maatwerk software voor hun klanten. Je hebt kennis of ervaring van SQL, Maar affiniteit met MS Acess is nog belangrijker. Je bent sociaal naar klanten en flexibel ingesteld. Je denkt altijd in kansen en gaat graag de uitdaging aan. Verder

Bekijk vacature »

Medior PHP developer

Functie Het team bestaat inmiddels uit zo’n 25 collega’s met specialisten op het gebied van development, data(analyse), marketing, infrastructuur en finance. Ze hebben een supermodern pand en bieden hiernaast veel vrijheid en verantwoordelijkheid. Ze doen er alles aan om jou op te gemak te stellen. Zo kun je je eigen werkplek inrichten naar persoonlijke wensen, maar gaan ze bijvoorbeeld ook jaarlijks met elkaar wintersporten en zijn er andere leuke uitjes. Als onderdeel van één van de scrumteams ga je aan de slag, samen ben je medeverantwoordelijk voor het doorontwikkelen van hun business applicatie waar het traffic team dagelijks mee werkt.

Bekijk vacature »

PHP Software Developer

Functie omschrijving Op zoek naar een nieuwe uitdaging binnen PHP? Lees dan snel verder! Wij zoeken een ervaren PHP developer die binnen een organisatie gaat functioneren als verlengstuk van de klant. Wij zoeken voor deze iemand die technisch complexe zaken met enthousiasme en plezier aanvliegt. Verder moet je instaat zijn om je tijd goed te managen omdat je aan meerdere projecten tegelijkertijd werkt. Je werkt met de nieuwste technieken en tijdens deze uitdaging werk je veel samen met de front-end developers van deze organisatie. Wij zoeken iemand die zichzelf graag uitdaagt en altijd de beste wilt zijn. Bedrijfsprofiel Waar ga

Bekijk vacature »

C#.NET ontwikkelaar

Functie omschrijving Voor een softwarebedrijf in de omgeving van Veghel zijn we op zoek naar een C# developer. Word jij blij van ontwikkelen in C# en .NET? Lees dan snel verder! Jouw werkzaamheden zullen er als volgt uit gaan zien: Op basis van de wensen van de klant ga je samen met je collega's ga je op zoek naar de juiste oplossingen en je gaat dit uitwerken tot een mooi eindproduct. Je bouwt webshops, webapplicaties en websites, dit doe je door middel van ASP.NET, MVC Framework en C#. Je zorgt voor de optimalisering van bestaande software en de automatisering van

Bekijk vacature »

Software Developer Java

Java/Kotlin Developer Ben jij een ervaren Java/Kotlin developer met een passie voor het automatiseren van bedrijfsprocessen? Wil je graag deelnemen aan uitdagende projecten bij aansprekende klanten? En ben je op zoek naar een professioneel, ambitieus en dynamisch bedrijf om je carrière verder te ontwikkelen? Kom dan ons team bij Ritense in Amsterdam versterken! Zo ziet de functie eruit: Als Java/Kotlin developer bij Ritense ben je verantwoordelijk voor de ontwikkeling en implementatie van applicaties die bedrijfsprocessen automatiseren, zodat onze klanten slimmer, efficiënter en klantgerichter kunnen werken. Als developer ben je in de lead en zorg je voor de correcte oplevering van

Bekijk vacature »

.NET developer

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

Full Stack C#.NET developer

Functieomschrijving Wij zijn op zoek naar een gepassioneerde Full Stack C#.NET Software Developer. Als Software Developer ben je verantwoordelijk voor het ontwikkelen van webapplicaties, apps en dashboards voor de eigen IOT-oplossingen. Je werkt samen met andere ontwikkelaars en engineers om de sensoren in machines uit te lezen en deze data om te zetten in management informatie voor jullie klanten. Taken en verantwoordelijkheden: Ontwikkelen en onderhouden van webapplicaties, apps en dashboards voor de eigen IOT-oplossingen. Testen en valideren van de ontwikkelde software. Actief deelnemen aan code reviews en bijdragen aan het verbeteren van de kwaliteit van de software. Je gaat aan

Bekijk vacature »

Lead Webdeveloper

As Lead Web Developer at KUBUS you are responsible for the implementation design of requirements and the software architecture of the web application and services of BIMcollab. In your role as lead developer you will naturally search for the optimum between the required implementation time, the performance of the application and a fast go-to-market of features, in line with our automated test and release train. Together with the other senior developers in your team you monitor the architecture of the application and you advise the product owner about necessary refactoring to improve the maintainability of the platform. Our development team

Bekijk vacature »

Java Developer (Training And Simulation)

Wat jij doet Je zou onze Java Developer zijn en nauw samenwerken met je Product Owner, Software System Engineer, Scrum Master en andere Developers. Samen draag je bij aan een multidisciplinair en zelf organiserend Agile team. De rol is zeer afwisselend en bestaat uit, maar is zeker niet beperkt tot: de-risk en prototype onbewezen simulatietechnologieën; simulatiekaders ontwikkelen voor gebruik door andere teams; je bent goed in het begrijpen van ingewikkelde ideeën; heeft de mogelijkheid om nauw samen te werken met grote internationale klanten, leveranciers en overheden om onze oplossingen, vastleggingsvereisten, enz. te definiëren en te presenteren. Ben jij het? Wij

Bekijk vacature »

Java Developer

Java Developers opgelet! Bij Luminis zijn ze opzoek naar jou. Lees de vacature en solliciteer direct. Luminis is een software- en technologiebedrijf met meerdere vestigingen. Vanuit deze vestigingen werken 200 professionals aan technisch hoogwaardige oplossingen voor klanten zoals KLM, Nike en Bol.com. Ook ontwikkelt Luminis eigen oplossingen op het gebied van cloud, Internet of Things, data intelligence, e-sports en e-learning. Luminis onderscheidt zich door aantoonbaar voorop te lopen in technologie en innovatie. Luminis heeft drie kernpunten die verankerd zitten in alles wat we doen: het omarmen van nieuwe technologie, meesterschap en kennis delen. Functiebeschrijving First things first! Het is belangrijk

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

21/11/2024 21:27:58
 
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.